Question

我试图做链接，当你：悬停时出现一个颜色不同于文字的上线，这里的代码看起来对我来说是正确的但是没有用，我也不知道为什么：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: ' ';
}

在这里查看更新的小提琴：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

bytes[] stringAsBytes = Encoding.Unicode.GetBytes(myString)仅在Firefox（check reference here）

中受支持

解决问题的可行方法：

text-decoration-color

<强> JSFiddle

Answer 5

快速谷歌搜索带我进入本教程：http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

我点击了“自己尝试”按钮，但是下划线不应该是红色的。该文本指出，任何主流浏览器都不支持它，但firefox确实有自定义选项。

除非你只使用firefox，否则你将不得不采取不同的方式

请参阅此图片：http://i.stack.imgur.com/qbTXE.png

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

5 个答案: