Petr Bečka Petr Bečka - 4 months ago 6
Javascript Question

jQuery mouseenter event is not executed

I'm having some trouble with mouseenter event applied on div area in my pages. I'm trying to change background-color of this div on mouse enter but it is all just ignored.

I have a simple HTML CODE:

<div id="services" class="services">
<div id="services-top">
<h2>Services</h2>
</div>
<div id="services-content">
<div id="services-content-left">
<img id="services-content-right-img" class="img-circle" src="http://i.imgur.com/vN5m4vK.jpg" alt="empty">
<h3>STUFF</h3>
</div>
</div>
</div>


And JS stuff with this event:

$(document).ready(function() {
$("services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});


And as I said before, when I enter this div area, background stays the same, without any changes.
HERE is an example.

Don't you have any idea how to solve it?

Answer

you simply missed out

out in your code, should be $("#services-content-left") instaed

$(document).ready(function() {
    $("#services-content-left").mouseenter(function() {
        console.log("enter");
        $(this).css("background-color", "yellow");
    });
});

signify a ID selector.