CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Meowsome
Meowsome

Reputation: 99

AddClass in mouseenter not working in JQuery

I've got this problem, I've a UL with some LIs and what I want it to do is: add the class "focused" when I enter the mouse in the LI and remove it to the previous one. So here is the code:

HTML:

<ul id="txtHint">
    <li class="focusable focused">Jack</li>
    <li class="focusable">Jone</li>
    <li class="focusable">Junita</li>
    <li class="focusable">Joleen</li>
    <li class="focusable">Jeniffer</li>
    <li class="focusable">Jacquie</li>
    <li class="focusable">Jin</li>
</ul>

JQuery:

  $("li.focusable").mouseenter(function () {
        $("li.focused").removeClass("focused");
        $(this).addClass("focused");
    });

CSS:

.focused {
    background-color: gray !important;
    color: white;
}

I hope someone could find the problem! Here is the fiddle: http://jsfiddle.net/8qGNu/1/

Upvotes: 0

Views: 66

Answers (3)

jko
jko

Reputation: 2098

use this css:

.focusable:hover {
    background-color: gray !important;
    color: white;
}

demo: http://jsfiddle.net/2EeB2/1/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You missed to include the jQuery library

Demo: Fiddle

Upvotes: 2

Michal Klouda
Michal Klouda

Reputation: 14521

You only forgot to include jQuery library.

enter image description here

Upvotes: 1

Related Questions