Navigation, background swap not having each <li> on hover
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 can see in the selector that each li.corner is going to do that the mouse is over. I'm trying to get him to only do the one above the mouse, how would I achieve this?
source to share
I tried to get close to 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>
source to share
are your items <span>
in yours <li>
? if so, you can 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 it would assign / remove classes to specific <span>
elements in the callee <li>
.
depending on how much stuff is in there, you can get better results with mouseenter
and mouseleave
to avoid triggering the mouse when crossing element boundaries:
$('#top ul li.corner').bind('mouseenter', function() {
// etc...
}).bind('mouseleave', function() {
// etc...
});
source to share
Try:
$("#top ul li.corner").mouseover(function(){
$(this).find(".left-corner").addClass("left-corner-hover");
// ...
});
You probably don't need to specify that this is a 'span' element.
Another thing to try is just add and remove the hover class and your CSS rules look like this:
.left-corner.hover { ... } .right-corner.hover { ... }
source to share