jQuery这个子元素悬停激活背景颜色

Question

我还在学习 jQuery，希望能得到一些建议，因为我认为它很简单，但不知道该怎么做。

请参阅下面我由 wordpress 生成的标记，它是带有帖子计数的类别的侧栏列表。

    <div id"sidebar-left">

        <ul id="sidebar-categories">
            <li class="list-header">Contents</li>

            <li class="cat-item cat-item-3">
                <a title="" href="x">News</a>
                <span>1</span>
            </li>
            <li class="cat-item cat-item-4">
                <a title="" href="x">Racing</a>
                <span>4</span>
            </li>
            <li class="cat-item cat-item-1">
                <a title="" href="x">Uncategorized</a>
                <span>1</span>
            </li>
        </ul>

    </div>

现在这一切都很酷，但是我的跨度计数绝对位于 li 中 a 标记的顶部。

这意味着我的问题是，当我悬停我的 a 标签，然后悬停跨度时，我的 a 标签的悬停状态消失了。所以我试图激活 a 标签：当我翻过跨度时悬停。

现在我已经设法使用下面的 jQuery 来做到这一点......

    $("ul#sidebar-categories li span").hover(function() {
        $("ul#sidebar-categories li a").css({ 
            backgroundColor: "464848" // a tag hover bg color
        });
    }, function() {
        $("ul#sidebar-categories li a").css({ 
            backgroundColor: "daddd7" // a tag normal bg color
        });
    });

但显然如您所见，这将激活此 sidebar-categories 列表中所有 a 标记的所有背景颜色。

这是我下面的尝试，只是让它激活当前父 li 内的标签背景颜色。但它不起作用。我也尝试过 parent 但仍然没有工作。

    $("ul#sidebar-categories li span").hover(function() {
        $(this).children("ul#sidebar-categories li a").css({ 
            backgroundColor: "464848" // a tag hover bg color
        });
    }, function() {
        $(this).children("ul#sidebar-categories li a").css({ 
            backgroundColor: "daddd7" // a tag normal bg color
        });
    }); 

另请参阅列表 ui 下方的屏幕截图，以便您了解为什么我需要它以这种方式工作。

因此，当您将鼠标悬停在类别列表上，然后将鼠标悬停在“帖子计数”上时，a:hover 伪类就会丢失。

提前致谢。 乔什

//// 添加我的 CSS

#sidebar-left ul {
    font-family: 'HelveticaNeueMediumCond';
    position: relative;
    border-bottom: 1px solid #eef0eb;
    padding: 21px 0 0;
    list-style: none;
}

#sidebar-left ul li {
    position: relative;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    height: 48px;
}

.list-header {
    border-top: 1px solid #eef0eb !important;
    border-bottom: 1px solid #c6c8c2 !important;
    height: 15px !important;
    padding: 7px 10px 5px !important;
    background: #c4c7c2;
    color: #fbfcfb;
    font-size: 14px;
}

#sidebar-left ul li a {
    width: 270px;
}

#sidebar-left ul li a {
    height: 20px;
    display: inline-block;
    border-top: 1px solid #eef0eb;
    border-bottom: 1px solid #c6c8c2;
    text-decoration: none;
    font-size: 20px;
    padding: 13px 10px;
    color: #464848;
    text-shadow: #eef0ea 1px 1px 0;
    outline: 0;
}

#sidebar-left ul li a:hover {
    border-top: 1px solid #4c4e4c;
    border-bottom: 1px solid #464848;
    text-decoration: none;
    color: #fbfcfb;
    text-shadow: #2d2e2e 1px 1px 0;
    background: #464848;
}

#sidebar-left ul li span {
    position: absolute;
    right: 10px;
    background: #ffffff;
    padding: 4px 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    font-size: 15px;
    color: #2cbcf5;
    height: 15px;
    min-width: 24px;
    text-align: center;
    z-index: 2;
    top: 0;
    font-family: 'HelveticaNeueBoldCond';
    margin: 12px 0;
    -webkit-box-shadow: 0px 1px 0px 0px #cbcec8;
    -moz-box-shadow: 0px 1px 0px 0px #cbcec8;
    box-shadow: 0px 1px 0px 0px #cbcec8; 
}

#sidebar-left ul li span:hover {
    -webkit-box-shadow: 0px 1px 0px 0px #252525;
    -moz-box-shadow: 0px 1px 0px 0px #252525;
    box-shadow: 0px 1px 0px 0px #252525;    
}

Answer 1

是否有原因您不能在父列表项而不是锚标记上激活悬停？如果这不起作用，您可以使用 .siblings() 函数来选择跨度的所有同级 DOM 元素。试试这样的：

$("ul#sidebar-categories li span").hover(function() {
    $(this).siblings().css({ 
        backgroundColor: "464848" // a tag hover bg color
    });
}, function() {
    $(this).siblings().css({ 
        backgroundColor: "daddd7" // a tag normal bg color
    });
}); 

这将选择任何直接的兄弟姐妹并更改其背景颜色。如果需要进一步过滤元素，可以将 CSS 选择器传递给 .siblings() 函数。