Question

I am using the following jquery code:

$('#top ul li.corner').mouseover(function(){     $('span.left-corner').addClass('left-corner-hover');     $('span.right-corner').addClass('right-corner-hover');     $('span.content').addClass('content-hover'); }).mouseout(function(){     $('span.left-corner').removeClass('left-corner-hover');     $('span.right-corner').removeClass('right-corner-hover');     $('span.content').removeClass('content-hover');  }); 

But as you see in the selector that is going to do every li.corner that the mouse is over. i am trying to get it to do only the one the mouse is over, how would I achieve that?

Answer 1

i tried to approximate what i imagined your code would look like, and the test runs fine:

css:

.left-corner-hover, .right-corner-hover, .content-hover {     background-color: #CCC; } 

jQuery:

$('#top ul li.corner').mouseover(function(){     $('span.left-corner', this).addClass('left-corner-hover');     $('span.right-corner', this).addClass('right-corner-hover');     $('span.content', this).addClass('content-hover'); }).mouseout(function(){     $('span.left-corner', this).removeClass('left-corner-hover');     $('span.right-corner', this).removeClass('right-corner-hover');     $('span.content', this).removeClass('content-hover');  }); 

html:

<div id='top'>     <ul>         <li class='corner'>             <span class='left-corner'>Left Corner</span>             <span class='content'>Content</span>             <span class='right-corner'>Right Corner</span>         </li>     </ul>     <ul>         <li class='corner'>             <span class='left-corner'>Left Corner</span>             <span class='content'>Content</span>             <span class='right-corner'>Right Corner</span>         </li>     </ul> <div>