CSS 为什么悬停时上划线不会改变颜色和样式？答案

【问题标题】：CSS Why overline doesn't change color and style on hover?CSS 为什么悬停时上划线不会改变颜色和样式？
【发布时间】：2015-07-02 08:28:28
【问题描述】：

我试图做一个链接，当你 :hover 出现一个与文本颜色不同的上划线时，这里的代码对我来说似乎是正确的，但不起作用，我不知道为什么：S

.subboto a:hover {
   text-decoration: overline;
   text-decoration-color: #f7a319;
   text-decoration-style: dashed;
}

JSFiddle

【问题讨论】：

为 text-decoration-color 声明一个类。将此添加到每个<div>。

标签： html css colors hover

【解决方案1】：

text-decoration-color 仅在 Firefox 和 Safari 中受支持。看看这里的文档，https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

如果你想这样做，你可以这样做

.subboto a:link, a:visited {
    text-decoration: none;
    color: black;
    position: relative;
}

.subboto a:hover:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-top: 1px dashed #f7a319;
    content: ' ';
}

在此处查看更新的小提琴：https://jsfiddle.net/ytq235an/6/

【讨论】：

在 IE 11 上为我工作 - 这里有一个关于浏览器支持的部分（10 天旧文章）css-tricks.com/almanac/properties/t/text-decoration
@wunth 不适用于text-decoration-color。看看css-tricks.com/almanac/properties/t/text-decoration-color——它说可以在 Chrome 中使用标志打开它，但大多数用户都会这样做。
啊，是的 - 抱歉。在某个地方，我完全忽略了实际问题
@wunth 没问题。您让我回来并提供解决方法：p

【解决方案2】：

似乎只有 Firefox 支持。 w3schools text-decoration-style

【讨论】：

【解决方案3】：

如果您希望在将鼠标悬停在 div 上时显示上划线

.subboto:hover {
    text-decoration: overline;
    text-decoration-color: #f7a319;
    text-decoration-style: dashed;
}

【讨论】：

【解决方案4】：

text-decoration-color 仅支持 Firefox (check reference here)

您的问题的可能解决方案：

.subboto a:hover {
    border-top: 1px dashed #f7a319;
}

JSFiddle

【讨论】：

【解决方案5】：

通过快速的 google 搜索将我带到了本教程：http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

我点击了“自己试试”按钮，但下划线不是应有的红色。文本声明它不受任何主要浏览器的支持，但 firefox 确实有一个自定义选项。

除非你对它只在 Firefox 上工作没问题，否则你将不得不以不同的方式去做

参考这张图片：http://i.stack.imgur.com/qbTXE.png

【讨论】：