Question

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

我还想要的是左边的李的背景也消失了，我怎么能这样做？

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

如何使菜单左侧背景消失？

1 个答案: