CODEWITHSUNDEEP
jqueryjquery-selectors
rwb
rwb

Reputation: 4478

Get hovered selector using jQuery

I think im being very silly here but here goes.

I have a menu with the basic structue:

<ul id="menu">
<li>
<h3><a href="/products/">Products</a></h3>
<span><a href="/products/">Have a look</a></span>
</li>
</ul>

What i am trying to do, is when the user hovers over the <li> change the text of the <span> to white. This is what i have:

$('ul#menu li').mouseenter(function(){
   $(this+ 'span a').css('color','white');
});

But its not working? I think its becuase $(this) is an object and i just want a string?

Upvotes: 0

Views: 81

Answers (5)

isNaN1247
isNaN1247

Reputation: 18099

You're overqualifying your #menu, so try this instead:

$('#menu li').hover(function() {
  $(this).find('span > a').css({'color' : 'white'});
});

Note you can also do this in CSS, however the :hover pseudo-selector is not properly supported in older versions of Internet Explorer on anything other than a.

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

Why use JS at all?

#menu > li:hover > span a {
   color: white;
}

Working example at http://jsfiddle.net/alnitak/fZwJ7/

Upvotes: 2

gion_13
gion_13

Reputation: 41533

you should use basic css for this : 

#menu li span{
    color : #000000;
}

#menu li:hover span{
    color : #ffffff;
}

Upvotes: 0

Ayman Safadi
Ayman Safadi

Reputation: 11552

Your problem is best solved by CSS, not JavaScript.

ul#menu li:hover span a {
    color: white;
}

Upvotes: 0

Salt Hareket
Salt Hareket

Reputation: 764

$('ul#menu li').mouseover(function(){
   $(this).find('span a').css('color','white');
});

Upvotes: 0

Related Questions