jquery - 如何让菜单左里背景消失？

Question

我在网站上有一个菜单。它在里的右边有一个分隔线，这被设置为背景。当您将鼠标悬停在上面时，它会消失并且链接会突出显示。

我还想让左边的li背景也消失，我该怎么做？

    .menu-link ul li    
{
    text-decoration:none;
    float:left;
    background: url(/Content/img/border-line-inside.png) no-repeat right;
}

.menu-link ul li a {
    color:#fff;
    padding: 0px 15px 0px 15px;
    line-height:40px;
    display: block;
    width:128px;
    text-align:center;
}

.menu-link a:hover{
    background:url(../img/menu-nav-hov.png) repeat-x;
    cursor:pointer; 
}

我猜我可能需要使用 jquery？

Answer 1

由于无法选择父元素，也无法在 CSS 中选择之前的兄弟元素，因此您确实需要 jQuery。

类似于 this可能会让你朝着正确的方向前进。 (jQuery 代码可能会得到改进，我不是专家)。

$(document).ready(function() {
    $('a').hover(function() {
        $(this).parent().prev().css('background','none');
    },
    function() {
        $(this).parent().prev().css('background','url(http://placekitten.com/10/20) no-repeat right');
    })
})