CODEWITHSUNDEEP
jquery
Gareth Compton
Gareth Compton

Reputation: 149

Jquery chaining different css issues

Trying to use css in jquery to define an element and another snipet of code when the mouse hovers over, i cant get either css codes to run. This is a proposing experiment and already aware CSS is more of use. This is simply a jquery use only codes.

Here are the jquery codes for a given paragraph with class p.

<p class="p"> this is a generic element with generic coding.</p>

Here is the jquery end.

$("document"). ready( function (){
    var $p = $("p.p");

    $p
        .css({
            "font-size" :  "200%" ,
            "color" : "#030"
        })
       .onhover( function(){
            $p.css({
                "font-size" : "175%" ,
                "color" : "#060"
            });
      });
});

Hopefully it will work! Thank you all for your hard work!

Upvotes: 1

Views: 62

Answers (1)

Adib Aroui
Adib Aroui

Reputation: 5067

As i mentionned in comment, there is no onhover in jQuery. Maybe in raw javascript but you cannot use it that way and apply it to jQuery object.

Use jQuery.hover() instead:

$("document"). ready( function (){
    var $p = $("p.p");

    $p
        .css({
            "font-size" :  "200%" ,
            "color" : "#030"
        })
       .hover( function(){
            $p.css({
                "font-size" : "175%" ,
                "color" : "#060"
            });
      });
});

Or you can use jQuery.on("mouseover", callback) as suggested by Louys. The two approaches serve your purpose for chainability.

Upvotes: 1

Related Questions