Jquery add pointer to nav

Question

I have a problem. Everytime I mouseover my list (doesn't matter which list item it is) the class .hover is added across the whole list. So is class .over. I realize I am adding those through jquery but how can have jquery only addclass to one list anchor only rather than all of them across the board.

$('.menuContainer li a').append('<span></span>');

$(".menuContainer li a").mouseover(
        function() {
            $(this).addClass("over");
            $('.menuContainer li a span').addClass('hover');
        return false;
});
$(".menuContainer li a").mouseout(
        function() {
            $(this).removeClass("over");
            $('.menuContainer li a span').removeClass('hover');
        return false;
});

<div class="menuContainer">
<ul>
 <li class="1">
<a href="#">list item<span></span></a>
</li>
 <li class="2">
<a href="#">list item<span></span></a>
</li>
 <li class="3">
<a href="#">list item<span></span></a>
</li>
</ul>
</div>

My goal is to have the class .hover with a background image that will be a pointer to emphasize what is currently being moused over.

Just for clarity (since you have two good answers below) it's important to remember that jQuery matches ALL elements by default. — jcolebrand, Jan 14 '11 at 02:45

score 4 · Accepted Answer · edited May 23 '17 at 12:04

4

Because you want to select the span of the current anchor, you should use the following notation $("span", this) as the selector... looks like this:

$('.menuContainer li a').append('<span></span>');

$(".menuContainer li a").mouseover(
        function() {
            $(this).addClass("over");
            $("span", this).addClass('hover');
        return false;
});
$(".menuContainer li a").mouseout(
        function() {
            $(this).removeClass("over");
            $("span", this).removeClass('hover');
        return false;
});

As pointed out in this post it performs a .find() within the specified selector element.

Hope that helps :)

edited May 23 '17 at 12:04

Community

1
1

answered Jan 14 '11 at 02:22

Damien-Wright

7,296
4
27
23

Beat me to it by 30 seconds ;) – jlmakes Jan 14 '11 at 02:25
Happens to me all the time, I have to say SO is an awesome way to improve typing speed :P – Damien-Wright Jan 14 '11 at 02:27
Yeah, I was going to use the .find() operator in my answer, but that enhanced notation is dope. – jlmakes Jan 14 '11 at 02:30
I know right, I only came across that post, and that notation a few days ago... never had a need for it before, but now I use it like mad. – Damien-Wright Jan 14 '11 at 02:33

score 2 · Answer 2 · edited May 23 '17 at 12:26

Damien-at-SF 's answer is fair enough. But I'm thinking it would just add another work.

why not leave your codes as it is and play with the css. if you want to style the <span>'s, do it like this,

.menuContainer li a.over span { .... }
.menuContainer li a.over span.hover { .... }

and on my experience, it is best to add/ remove class (to something like this situation) where you can have siblings relation (in this situation, the <li>'s ).

your codes will then be shorten to something like this,

$(".menuContainer li a").mouseover(
    function() {
        $(this).closest('li').addClass("over").find('span').addClass('hover')
        .end().siblings().removeClass("over").find('span').removeClass('hover');
}).append('<span></span>');

Jquery add pointer to nav

2 Answers2