6

スパンを使用してホバー イベント中に下線の色を変更しようとしています。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からアイデアを得ましたが、それはクロムでも機能しません。

注：これを修正するためにボーダーを使用したくありません。すでにボーダーをボーダーとして使用しています

誰か助けてくれませんか？これを修正するために使用できるある種のクロムハック/例外はありますか?

4

2 に答える 2

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 でまったく同じ計算されたスタイルを持っていることです (Dev Tools によると)。

将来的には、単一の要素とtext-decoration-colorCSS プロパティを使用できるようになります。

于 2016-12-14T08:04:00.737 に答える
2

ここで境界線を使用したくないと言ったのは知っていますが、2 つのブラウザー間で同じように動作しないものを見つけました。

内部スパンを追加し、それに境界線を使用することで、これを Chrome で動作させることができます。

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

あなたが考えていたものと違っていたら申し訳ありませんが、Gecko と WebKit はここで何かに同意していません!

于 2012-07-02T07:32:21.867 に答える