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

Posted 2023-02-25

【中文标题】实现 css hover 以适用于所有 <a> 元素，其他元素之一

【英文标题】：Implement css hover to work for all <a> elements else one of them

【发布时间】：2014-09-10 10:40:37

【问题描述】：

这是我的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 没有悬停事件，所以当用户点击它时，什么也没有发生。

【问题讨论】：

您的 html 已损坏。看我的回答

【参考方案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;

【参考方案2】：

#navigation li:not(:first-child) a:hover

    color:#FFF;

Fiddle here

【参考方案3】：

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

#navigation li + li a:hover

    color: #FFF;

来自W3C：

E + F：匹配任何F 元素，紧跟在兄弟元素E 之前。

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

【讨论】：

谢谢。这是什么？

【参考方案4】：

为第一个元素添加一个 id 或类（你不想悬停的那个）

将此css添加到该类或id

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


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

【讨论】：

除此之外，没有理由在链接中包含 div 标签。这是不需要的额外标记，会增加您网站的加载时间。

【参考方案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>

【讨论】：

是的对不起我修好了。

【参考方案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>

【讨论】：

您能解释一下您的两个答案有何不同吗？它们看起来像是重复的帖子，除了对 html 的一些小改动。

【参考方案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>