Jquery "the event object" trying to change "CSS" of <div> tag not working

Question

index.html:

<html>
<head>
    <title>chapter 5</title>
    <script src="jquery.js"></script>
    <script src="app.js"></script>

</head>
<body>
    <div >
        <p>this is a paragraph</p>
    </div>
</body>
</html>

app.js:

$(function() {
    $("div").on("hover", function(event) {
        if(event.type === "mouseenter") {
            $(this).css("background", "blue");
        } 
        else {
            $(this).css("background", "red");
        }
    });
});

so according to my Jquery: when I bring mouse over to tags it should change its colour to red and when any other even inside tag except mouse enter it should change to blue. But nothing is happening?

I have tried other functions with event which works fairly well I can not understand why this one is not working do I have to do something with "css" maybe?

I'm wondering why you did not use mouseenter from the beginning. Keep in mind to not add overhead such as that in your code — Alexander
– Alexander, Commented Dec 29, 2013 at 21:58
I was actually trying out some examples from a book to learn jQuery interestingly the book is published in 2013 and still using "hover" which is removed. — Deepak
– Deepak, Commented Dec 29, 2013 at 22:21

Ram · Accepted Answer · 2013-12-29 22:12:09Z

3

From the jQuery's .on() method documentation:

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

Listen to mouseenter and mouseleave events instead of the hover:

$("div").on("mouseenter mouseleave", function(event) {
   $(this).css("background", event.type === "mouseenter" ? "blue" : "red");
});

Alternatively you can pass an object to the .on() method:

$("div").on({
   mouseenter: function() {
      $(this).css("background", "blue");
   },
   mouseleave: function() {
      $(this).css("background", "red");
   }
});

edited Dec 29, 2013 at 22:12

answered Dec 29, 2013 at 21:53

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Collectives™ on Stack Overflow

Jquery "the event object" trying to change "CSS" of <div> tag not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related