jquery - 导航，背景交换不是每个鼠标悬停时

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>

根据里面有多少东西，使用mouseenterand可以获得更好的结果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");
    // ...
});

您可能不需要指定它是一个“跨度”元素。

要尝试的另一件事是添加和删除“悬停”类，并使您的 CSS 规则如下所示：

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