html - 实现 css hover 以适用于所有 <a> 元素，其他元素之一

Question

这是我的CSS代码:

#navigation
{
    width: 100%;
    height:31px;
    background:#333;
}
#navigation ul
{
    margin: 0;
    padding: 0;
}
#navigation ul li
{
    list-style-type: none;
    display: inline;
}
#navigation li a
{
    display: block;
    float: right;
    color:#CCC;
    text-decoration: none;
    padding-top: 7px;
    padding-right: 10px;
    padding-bottom: 7px;
    padding-left: 10px; 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight:bold;
}
#navigation li a:hover
{
    color:#FFF;
}

这是我的 html 代码:

<div id="navigation">
    <ul>
        <li><div><a href="">menu1</a></div></li>
        <li><div><a href="">menu2</a></div></li>
        <li><div><a href="">menu3</a></div></li>
        <li><div><a href="">menu4</a></div></li>   
      </ul>
</div>

这里每个链接标签都有悬停事件。但我只想删除 menu1 的悬停事件。我的意思是用户可以点击 menu2、menu3 和 menu4，但是 menu1 没有悬停事件，所以当用户点击它时，没有任何反应。

Answer 1

试试这个 DEMO

#navigation
{
    width: 100%;
    height:31px;
    background:#333;
}
#navigation ul
{
    margin: 0;
    padding: 0;
}
#navigation ul li
{
    list-style-type: none;
    display: inline;
}
#navigation li a
{
    display: block;
    float: right;
    color:#CCC;
    text-decoration: none;
    padding-top: 7px;
    padding-right: 10px;
    padding-bottom: 7px;
    padding-left: 10px; 
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight:bold;
}
#navigation li:hover:nth-of-type(2) a
{
    color:#FFF;
}
#navigation li:hover:nth-of-type(3) a
{
    color:#FFF;
}
#navigation li:hover:nth-of-type(4) a
{
    color:#FFF;
}