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

Question

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

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

JSFiddle

Answer 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: ' ';
}

在此处查看更新后的 fiddle：https://jsfiddle.net/ytq235an/6/

Answer 2

好像只有Firefox支持。 w3schools text-decoration-style

Answer 3

如果您希望在将鼠标悬停在 div

上时显示上划线

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

Answer 4

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

您问题的可能解决方案：

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

JSFiddle

Answer 5

快速 google 搜索使我找到了本教程：http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

我点击了 "try it yourself" 按钮，但下划线不是应该的红色。文本指出它不受任何主要浏览器的支持，但 firefox 确实有一个自定义选项。

除非你觉得它只适用于 firefox，否则你将不得不以不同的方式处理它

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

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

CSS Why overline doesn't change color and style on hover?

html

css

colors

hover