Question

HTML

<ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

CSS

#menu li{
    width:80px;
}
#menu li:hover {
    width:200px;
}

我想将 OTHER <li>s 非强制的宽度设置为60PX，而其中一个是Hovered，然后将宽度设置回80PX当他们所有人都没有徘徊时......我该怎么做？

Answer 1

使用jQuery

jQuery(function ($) {
    $('#menu li').hover(function () {
        $(this).width(200).siblings().width(60)
    }, function () {
        $(this).siblings().addBack().width(80)
    })
})

演示：Fiddle

Answer 2

我想设置其他<li>s的宽度不是60PX，而其中一个是悬停的，然后当所有这些都没有悬停时将宽度设置回80PX

使用jquery你可以这样做：

$('#menu li').hover(function(){
    $('#menu li').css('width','60px');
    $(this).css('width','80px');
},function(){
   $('#menu li').css('width','80px');
});

demo

Answer 3

要选择不li的{{1}}元素，请考虑尝试：

:hover

Answer 4

您可以通过简单地使用：hover on li和ul。

来实现

    ul li{
       width:80px;
    }

    ul:hover li{
       width: 60px;
    }

    #menu li:hover {
       width:200px;
    }

如何更改非Hover相同元素的CSS样式

4 个答案: