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中标签的顶部。

这意味着我的问题是，当我悬停我的标签，然后悬停跨度时，我标签的悬停状态消失了。所以我正在尝试激活一个标签：当我滚过跨度时悬停。

现在我已经设法使用下面的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
        });
    });

但是很明显，正如您所看到的，这将激活此侧边栏类别列表中所有标签的所有背景颜色。

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

    $("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的屏幕截图，这样你就可以看到为什么我需要它以这种方式工作。

Hover Status Category List 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（）函数选择span的所有兄弟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（）函数。

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

1 个答案: