Question

我正在使用以下jquery代码：

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

});

但正如您在选择器中看到的那样，鼠标结束时，每个li.corner都会执行。我试图让它只做鼠标结束的那个，我怎么能实现呢？

Answer 1

是<span>中的<li>元素吗？如果是这样，你可以做类似的事情：

$('#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...
});

基本上，这会将类分配/移除到被调用的<span>中的特定<li>元素。

取决于其中的内容，使用mouseenter和mouseleave可以获得更好的结果，以避免在跨越元素边界时触发鼠标悬停：

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

Answer 2

我试图近似我想象的代码看起来像什么，测试运行良好：

的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 3

尝试：

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

您可能不需要指定它是'span'元素。

要尝试的另一件事是添加和删除'hover'类，并使CSS规则如下：

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

导航，后台交换没有鼠标悬停<li> </li>

3 个答案: