【问题标题】：Hover effect applies to all anchor tags in the page [duplicate]悬停效果适用于页面中的所有锚标签[重复]
【发布时间】：2020-08-08 20:49:45
【问题描述】：

我正在尝试将悬停效果应用于页面中的特定列表，我使用以下代码。但它适用于页面中的所有锚标记。我的代码如下：

        #menu-projects-menu li a:hover,li a:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: underline;
    color:yellow !important;
}

我的id是“menu-projects-menu” 谁能帮我这个。谢谢你

【问题讨论】：

正确发布您的问题，提及您想要的特定列表

标签： html css

【解决方案1】：

我想你正在寻找这个。试试看！！

#menu-projects-menu li a:link {
    text-decoration: underline;
    color:red;
}

#menu-projects-menu li a:hover  {
    text-decoration: underline;
    color:yellow;
}

#menu-projects-menu li a:active  {
    text-decoration: underline;
    color:black;
}

<!DOCTYPE html>
<html>
<body>


<ol id="menu-projects-menu">
  <li><a href="#coffee" target="_blank" >Coffee </a></li>
  <li>Tea</li>
  <li>Mango juice </li>
  <li><a href="#Milk" target="_blank"> Milk </a></li>
</ol>


</body>
</html>

【讨论】：

感谢您的回复。

【解决方案2】：

试试这个代码：

#menu-projects-menu li a:hover,
#menu-projects-menu li a:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: underline;
    color:yellow !important;
}

【讨论】：

谢谢老哥，这个可行。