Question

我想在悬停时更改文字装饰下划线颜色。但我希望下划线颜色与文字颜色不同。

我已经设法使用＆＃34; -moz-text-decoration-color＆＃34;在firefox上执行此操作。但这并不支持其他主流浏览器。

p{
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red; /* Code for Firefox */
}

任何想法让它在其他浏览器上工作。感谢

Answer 1

而不是使用文本修饰使用border：bottom 1px solid red;然后在悬停时更改颜色。

然后相应地将p标签上的行高更改为下面的所需空间。

这样您就可以保证它可以在所有浏览器中使用。

.box a {text-decoration:none;border-bottom: 1px solid red;width:auto; }
.box a:hover {border-bottom: 1px solid blue;}

在这里进行演示http://jsfiddle.net/Lme3w/

Answer 2

此格式为only supported in Firefox

您可能希望将透明（或特定颜色）底部边框应用于元素，然后在悬停时应用颜色。

Demo Fiddle

a{
  border-bottom: 1px solid transparent; /* <-- change transparent to a specific default color if desired */
  text-decoration:none;
}
a:hover{
  border-color:red;
}

Answer 3

p:hover{
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red; /* Code for Firefox */
}

Answer 4

如果你必须使用文字装饰而不是边框，我只需将文字换成<span>并将其涂上颜色即可。

示例：

<p><span>Text here</span></p>

p {
    text-decoration: underline;
}
p:hover {
    color: red;
}
p span {
    color: #000;
}

使用文本装饰颜色

4 个答案:

Demo Fiddle