如何在悬停时从名称中删除下划线答案

【问题标题】：How to remove underline from a name on hover如何在悬停时从名称中删除下划线
【发布时间】：2011-11-03 13:32:05
【问题描述】：

我有这样的html：

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

legend.green-color{
    color:green;
}

在我的情况下，Section 看起来是绿色的，但是当我将鼠标指针放在它上面时，它看起来像一个 href，但我希望它保持不变，没有下划线和改变颜色。

是否可以在不更改 css 或使用最少 css cahnge 的情况下实现？

或者可能与 jquery 有某种关系？

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

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

【讨论】：

仅供使用 Bootstrap 的人参考...我需要在 "none" 之后使用 "!important" 才能正常工作。示例：a:hover{ text-decoration: none !important; }
也在使用 Bootstrap 并且确实添加了“！important”使它对我有用。要添加，text-decoration: none; 不需要在 :hover 伪类的样式中。在 a 标签样式中添加它适用于悬停和非悬停状态。

【解决方案2】：

去除锚标签的文字装饰

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

【讨论】：

我不是想在这里挑起一场火焰战争，但我喜欢这种内联风格。我的意思是我的 HTML 文件只需要这种类型的样式一两次。我认为创建单独的样式表是不合理的，即使分离是一种很好的做法。

【解决方案3】：

你可以使用legend.green-color a:hover下的CSS来做。

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

【讨论】：

【解决方案4】：

要保持颜色并防止链接上出现下划线：

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

【讨论】：

【解决方案5】：

您可以为特定链接分配一个 id 并添加 CSS。请参阅以下步骤：

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

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

然后添加必要的CSS如下：

#smallLinkButton:hover,active,visited{

      text-decoration: none;
      }

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

在react 你需要这样做

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

或者如果您在react 中使用bootstrap，则使用此类

className="text-decoration-none"

【讨论】：