如何在悬停时去除名称下划线

Question

我有这样的HTML：

<legend class="green-color"><a name="section1">Section</a></legend>

legend.green-color{
    color:green;
}

在我的情况下，Section 看起来是绿色的，但是当我把鼠标指针放在上面时它就变成了带下划线并且改变颜色的 a href 样式，但我想让它保持原来的样子，不带下划线也不改变颜色。是否可以实现而无需更改CSS或只需最小程度的CSS更改？或者可能用jQuery的某种方式吗？

- Joper

Answer 1

试试这个：

legend.green-color a:hover{
    text-decoration: none;
}

- Harry Joy

---

供使用Bootstrap的人参考... 我需要在"none"之后使用"!important"才能使它起作用。例如：a:hover{ text-decoration: none !important; } - JustBlossom

同时我也使用了Bootstrap，确实在样式中添加“！important”让它对我起作用。另外，text-decoration: none;不需要在:hover伪类的样式中。将其添加到a标签的样式中可以同时适用于悬停和非悬停状态。 - nakakapagpabagabag

Answer 2

去除锚点标签的文本装饰

<a name="Section 1" style="text-decoration : none">Section</a>

- Adithya Surampudi

---

我并不是想在这里引发一场争论，但我喜欢这种内联样式。我的HTML文件只需要使用这种样式一两次。即使分离是一个好的实践，但我认为创建一个单独的样式表并不能节省时间。 - Just a HK developer

Answer 3

你可以在legend.green-color a:hover下使用CSS实现。

legend.green-color a:hover {
    color:green;
    text-decoration:none;
}

- Small Hadron Collider

Answer 4

为了保持链接的颜色并避免下划线，可以采取以下措施：

legend.green-color a{
    color:green;
    text-decoration: none;
}

- Chris

Answer 5

您可以为特定的链接指定一个ID并添加CSS，具体步骤如下：

1. 添加您选择的ID（必须是唯一的名称；只能以文本开头，而不能以数字开头）：

<a href="/abc/xyz" id="smallLinkButton">def</a>

2. Then add the necessary CSS as follows:

   #smallLinkButton:hover,active,visited{
   
         text-decoration: none;
         }
   

- Wachaga Mwaura

Answer 6

legend.green-color{
    color:green !important;
}

- BaiJiFeiLong

Answer 7

在React中，你需要这样做。

<Link to="/" style={{ textDecoration: 'none' }}>
....
</Link>

如果您在react中使用bootstrap，则请使用此类。

className="text-decoration-none"

- Zohab Ali