Jquery chaining different css issues

Question

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!

is onhover a jQuery function? what i know is jQuery.hover() — Adib Aroui
– Adib Aroui, Commented Jul 6, 2016 at 23:08
it was i think, its suppose to be for when a mouse hovers over it — Gareth Compton
– Gareth Compton, Commented Jul 6, 2016 at 23:09
because i am proposing an experiment on the efectiveness on jquery using both javascript and css. vs css alone (which i can easily do, but it will defeat the purpose of this experiment) — Gareth Compton
– Gareth Compton, Commented Jul 6, 2016 at 23:23

Adib Aroui · Accepted Answer · 2016-07-06 23:12:20Z

1

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.

answered Jul 6, 2016 at 23:12

Adib Aroui

5,0656 gold badges45 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Louys Patrice Bessette Over a year ago

Does .hover needs two handler ? If only one specified, it's the out handler??? I'm not sure but...

Gareth Compton Over a year ago

tried the input on w3schools try it yourself. still not seeing any css on any event

Adib Aroui Over a year ago

@LouysPatriceBessette I don't see what you mean honneslty!

Adib Aroui Over a year ago

@LouysPatriceBessette, it is only one callback.

Jon P Over a year ago

JsFiddle of the above much better than W3Schools .... note that Document.Ready is handled by jsfiddle

|

Collectives™ on Stack Overflow

Jquery chaining different css issues

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related