如何使用 CSS 更改鼠标悬停下划线的颜色？ [复制]答案

【问题标题】：How can I change the color of a mouse hover underline using CSS? [duplicate]如何使用 CSS 更改鼠标悬停下划线的颜色？ [复制]
【发布时间】：2014-06-09 17:28:15
【问题描述】：

当鼠标悬停在字符串上时，如何只更改下划线的颜色？

这里是the site，在右上角你会看到菜单。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color + :hover
我试过这个 .example { text-decoration: underline;文字装饰颜色：红色； } 但字符串颜色也在变化...
@user3503874 试试这个解决方案jsfiddle.net/5CUWs 底部边框

标签： html css underline

【解决方案1】：

text-decoration-color 仅受 Mozilla 支持。

我的建议是使用

1) 底部边框

a:hover
{
text-decoration: none;
border-bottom: 1px solid blue;
}

或

2) CSS 中的背景图片。

a:hover
{
    text-decoration: none;
    background: url('image.jpg') #FFF repeat-x;
}

制作适合您需要的图片。并将背景图像定位到底部。其余颜色可以#FFF。

【讨论】：

【解决方案2】：

试试这个

<style type="text/css" media="screen" />
a {
text-decoration: none;
}
a:link {
color: #0000FF;
border-bottom: 1px solid #0000FF;
}
a:visited {
color: #0000FF;
border-bottom: 1px solid #C0C0C0;
}
a:active {
color: #FF0000;
border-bottom: 1px solid #FF0000;
}
a:hover {
color: #000000;
border-bottom: 2px solid #DD0000;
}
</style>
<a href="http://www.google.com/">Hover this link to view the color change</a>

【讨论】：

【解决方案3】：

您可以使用三种方法：

使用text-decoration-color。

a:hover {text-decoration-color: green; color: blue;}

使用两个 DOM 元素！

a:hover {color: green; text-decoration: underline;}
a:hover span {color: blue;}

使用border-bottom：

a:hover {border-bottom: 1px solid green; color: blue;}

这三种方法都给出相同的输出。颜色用蓝色，线条用绿色！

另外，除了上面的方法，还有很多：Crafting link underlines。感谢srekoble。

【讨论】：

有3种以上的方式，例如渐变看看这篇很棒的文章medium.com/designing-medium/7c03a9274f9

【解决方案4】：

你可以简单地通过添加来改变它

a:hover{
    text-decoration:underline;
    border-bottom: 0px solid blue;
}

【讨论】：

【解决方案5】：

我希望添加边框底部的颜色更容易。

试试看

【讨论】：