17

我有一个链接<a class="link-articles" href="#articles">My Articles</a>

和我的 CSS.link-articles { text-decoration: underline; color: blue; }

但是，在悬停时，我希望用红色下划线代替蓝色下划线，但文本应保持蓝色，只有下划线将颜色变为红色。

怎么做这样的事情？

4

9 回答 9

19

因为你不能表示哪种颜色文本下划线的第二种颜色，一种策略是删除它并使用边框。

.link-articles
{
    border-bottom: solid 1px blue;
    text-decoration: none;
}

.link-articles:hover
{
    border-bottom-color: red;
}

请注意，如果您离开text-underline，它会在悬停时向下移动，因为它的位置与底部边框的位置不完全相同。

这种方法还有一个额外的优势，即能够通过使用或替换线样式来定位下划线line-height。soliddotteddashed

无边界方法：

正如@Pacerier 在评论中指出的那样，这是使用伪类和 CSS 内容（JSFiddle）的替代策略：

.link-articles
{
    position: relative;
}

.link-articles[href="#articles"]:after
{
    content: 'My Articles';
}

.link-articles:after
{
    color: red;
    left: 0;
    position: absolute;
    top: 0;
}

然而，使用抗锯齿，它可能在文本边缘有一些颜色混合。如果您不喜欢手动放入contentCSS 的想法，您可以使用属性或重复元素。

于 2013-03-18T19:40:55.410 回答
7

使用border-bottom：

a:hover.link-articles {border-bottom: 1px dotted red; text-decoration: none;}

查看演示

于 2013-03-18T19:38:54.067 回答
4

做就是了：

a:hover {
  text-decoration-style: dotted
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

于 2020-02-04T19:10:29.340 回答
3

使用边框：

.link-articles { text-decoration: none; border-bottom: blue 1px solid; }
.link-articles:hover { border-bottom: red 1px dotted; }
于 2013-03-18T19:38:53.140 回答
2

演示小提琴 

.link-articles { text-decoration: none; border-bottom: 1px dotted blue; }
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; }
于 2013-03-18T19:42:23.230 回答
1

尝试这个：

 .link-articles{ text-decoration: none; border-bottom:1px dotted; border-color:blue; }
 .link-articles:hover{ border-color:red; }

演示

于 2013-03-18T19:39:03.257 回答
1

悬停时显示底部边框：

a.link-articles {
    text-decoration: none;
    border-bottom: 1px dotted blue;
}
a.link-articles:hover {
    border-bottom: 1px dotted red;
}
于 2013-03-18T19:39:31.140 回答
0

当:hover用户将鼠标放在元素上时，样式用于设置样式。

.link-articles       { ... }
.link-articles:hover { ... }

您可以使用该border-bottom属性来代替text-decoration虚线、虚线和宽度样式。

于 2013-03-18T19:39:09.403 回答
0

您可以使用 CSS3text-decoration-color属性，但不幸的text-decoration-color是，任何主流浏览器都不支持该属性。

Firefox 支持另一种选择，即-moz-text-decoration-color属性。

参考：http ://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

浏览器支持：http ://caniuse.com/#search=text-decoration-color

JSFiddle（不适用于所有浏览器）

所以最好的方法仍然是使用border-bottomcss 属性作为一个技巧。

于 2015-06-25T14:10:27.257 回答