6

我试图在使用 spans 的悬停事件期间更改下划线颜色，它在 IE9 和 Firefox 13.01 中有效，但在 Chrome 中无效（它应该在金色下划线）。

#menu li:hover span.underline { text-decoration:underline; color: #FAA301; }

<ul id="menu"> <li style="z-index: 7;"><span class="underline"><a href="#">link1</a></span></li> </ul>

这是 js.fiddle：http: //jsfiddle.net/wuUpL/7/。

我最初是从这篇文章https://stackoverflow.com/a/1175402/1490248中得到这个想法的，但那个也不适用于 chrome。

注意：我不想使用边框来解决这个问题，我已经使用边框作为边框

有谁可以帮我离开这里吗？是否有某种 chrome hack/exception 我可以用来解决这个问题？

4

2 回答 2

2

我知道你说过你不想在这里使用边框，但是你发现了一些在两个浏览器之间不一样的东西。

您可以通过添加内部跨度并在其上使用边框来使其在 Chrome 上运行。

http://jsfiddle.net/wuUpL/10/

抱歉，如果这不是您的想法，但 Gecko 和 WebKit 在这里的某些事情上没有达成一致！

于 2012-07-02T07:32:21.867 回答
2

也许值得注意的是，即使在 Chrome 中，通常设置不同的父子文本颜色以获得不同颜色的下划线也是如此。但是 Chrome 中的链接装饰继承存在一些奇怪的错误：

u {
  text-decoration: underline;
  color: red;
}
u:hover {
  text-decoration: overline;
  color: green;
}
u * {
  text-decoration: none;
  color: black;
}
u:hover * {
  text-decoration: none;
  color: gold;
}
<p>
  <u>
    Parent with decoration.
    <span>Child (is a <code>span</code>). This works: <code>text-decoraion</code> has differrent (parents) colour, always.</span>
  </u>
</p>
<p>
<p>
  <u>
    Parent with decoration.
    <a href="#">Child (is a <code>link</code>). This does not work <strong>in Chrome</strong>: <code>text-decoration</code> has always childs colour.</a>
  </u>
</p>

奇怪的是，两个最里面的元素在 Chrome 中具有完全相同的计算样式（根据开发工具），所以现在似乎没有什么可解决的。

将来可以使用单个元素和text-decoration-colorCSS 属性。

于 2016-12-14T08:04:00.737 回答