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

Answer 2

#navigation li:not(:first-child) a:hover
{
    color:#FFF;
}

Fiddle here

Answer 3

要选择第二个元素和下一个元素，您可以在CSS中使用+选择器：

#navigation li + li a:hover
{
    color: #FFF;
}

来自W3C：

E + F：匹配前面有兄弟元素F的任何E元素。

要禁用链接，您应该更改标记，或使用JavaScript。

Answer 4

将id或类添加到第一个元素（您不想悬停的元素）将此css添加到该类或id

#id-you-used:hover {
color: #CCC;
}

.class-you-used:hover {
color: #CCC;
}

Answer 5

前两个链接的HTML已损坏

    <li><div><a href="">menu1/a></div></li>
    <li><div><a href="">menu2/a></div></li>

应该是：

    <li><div><a href="">menu1</a></div></li>
    <li><div><a href="">menu2</a></div></li>

Answer 6

另一个简单的答案：

css代码：

 @charset "utf-8";
/* CSS Document */

html, body
{
    margin:0;
    padding:0;
    height:100%;
}


#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;
}
#username
{
    display: block;
    float: left;
    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;
    background-color:#078415;
}
#navigation a:hover
{
    color:#FFF;
}

html代码：

<div id="navigation">
  <ul>
    <li><div id="username">menu1</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>

Answer 7

一个更简单的答案：

css代码：

@charset "utf-8";
/* CSS Document */

html, body
{
    margin:0;
    padding:0;
    height:100%;
}


#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 a.active:hover
{
    color:#FFF;
}

html代码：

<div id="navigation">
    <ul>
        <li style="float:left; background-color:#055C06;"><div><a>menu1</a></div></li>
        <li style="float:left; background-color:#DA4A38;"><div><a class="active" href="">menu2</a></div></li>           
        <li><div><a class="active" href="">menu3</a></div></li>
        <li><div><a class="active" href="">menu4</a></div></li> 
    </ul>
</div>

实施css悬停以适用于所有<a> elements else one of them</a>

7 个答案: