如何更改未懸停的同一元素的CSS樣式

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;
}

我想設置其他的寬度<li>s ，而他們中的一個盤旋着， 未向徘徊和60PX然后設置寬度回到80PX，當所有的人都不會徘徊..我會怎么做呢？

Answer 1

使用jQuery

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

演示： 小提琴

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

演示

Answer 3

要選擇不是:hover li元素，請考慮嘗試：

#menu li{
    width:80px;
    color: green;
}
#menu:hover li{
    color: yellow;
}
#menu li:hover {
    width:200px;
    color: red;
}

Answer 4

您可以通過在li和ul上簡單地使用：hover來實現。

    ul li{
       width:80px;
    }

    ul:hover li{
       width: 60px;
    }

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