如何使用CSS更改鼠标悬停下划线的颜色？

Question

当使用鼠标悬停字符串时，如何仅更改下划线的颜色？

以下是the site，在右上角，您会看到菜单。

Answer 1

您可以使用三种方法：

1. 使用text-decoration-color。

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

2. 使用两个DOM元素！

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

3. 使用border-bottom：

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

所有这三种方法都提供相同的输出。颜色用蓝色和线条用绿色！

此外，除上述方法外，还有很多：Crafting link underlines。感谢srekoble。

Answer 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>

Answer 3

您只需添加

即可更改

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

Answer 4

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

试试吧

Answer 5

只有Mozilla支持

text-decoration-color。

我建议使用

1）border-bottom

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。