Navigation, background swap not having every <li> on mouseover

Question

Hey,

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?

Thanks,

Ryan

Answer 1

are your <span> elements within your <li>? if so you could do something like:

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

basically, this would assign/remove the classes to the specific <span> elements within the <li> called.

depending on how much stuff is in there, you may get better results using mouseenter and mouseleave, to avoid triggering mouseover when you cross element boundaries:

$('#top ul li.corner').bind('mouseenter', function() {
  // etc...
}).bind('mouseleave', function() {
  // etc...
});

Answer 2

Hey Owen,

I have this now:

$("#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");

For one section and now only the one i have a mouseover on has the hover effect, but it is not working with the "content-hover" class, just the corners are having the effect.

Exactly what does the this tell that code? To separate it?

Thanks,

Ryan

Answer 3

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>

Answer 4

Try:

$("#top ul li.corner").mouseover(function(){
    $(this).find(".left-corner").addClass("left-corner-hover");
    // ...
});

You probably don't need to specify that it's a 'span' element.

Another thing to try is to just add and remove the 'hover' class, and have your CSS rules look like:

.left-corner.hover { ... }
.right-corner.hover { ... }

Answer 5

Hey Owen, my HTML looks like:

<ul>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="http://www.ryancoughlin.com/index.php" title="Go Home">home</a></span>
  <span class="right-corner"></span>
 </li>
 <li class="corner">
  <span class="left-corner"></span>
  <span class="content"><a href="http://www.ryancoughlin.com/category/tutorials/" title="View Tutorials">tutorials</a></span>
  <span class="right-corner"></span>
 </li>
</ul>

Check it out here at my site: http://www.ryancoughlin.com/index.php - the top bar.

Answer 6

Hey Owen...thank you very much for your help! Moving the declaration cleared it up. So it was just overwriting it?

Also, what did adding the ",this" do?

And Orip:

$("#top ul li.corner").mouseover(function(){
    $(this).find(".left-corner").addClass("left-corner-hover");
    // ...
});

What does this do compared to the other code?

Thanks both of you.

Ryan