1

リンクのリストを作成し、それらのリンクにa:hover状態を与えるとき、箇条書きを含むリンク全体をホバーで強調表示したいと思います。しかし、私のリストにはAsよりも広い定義された幅があるため、LIは:hoverを取得し、Asの前に色を変更します。これは厄介に見えます!このような:

http://jsfiddle.net/NgWLR/

私が何を意味するのか分かりますか?これは、AとLIが別々のエンティティであり、異なる時間にトリガーされるようなものです。

display:blockをAスタイルに追加しようとすると、Firefoxでの奇妙な表示の問題と、他のブラウザーでのわずかな改善だけが得られますが、それでも問題は解決しません。

list-style-typeをnoneに変更し、次のようにLIに:beforebulletエンティティを配置できます。

http://jsfiddle.net/tScnS/2/

そして、それは少なくともSafariとFirefoxではうまくいくようですが、解決策としては、すべてのブラウザでサポートされるのはちょっとラフ/乱雑/ありそうもないようです。

誰もがこれを機能させるための「防弾」(ハァッ!)方法を知っていますか、それとも私は先に進んで2番目のJSfiddle-list-style-none、bullet:beforeの方法で実装する必要がありますか?ありがとう!

4

2 に答える 2

3

リンクのスタイルを設定するli:hover a代わりに使用できます。例:http: //jsfiddle.net/NgWLR/2/a:hover

PS:例を示すときは、無関係なコードを削除してください。

于 2012-03-12T12:31:31.963 に答える
0

私が理解しているように、タグから削除display:blockします。<a>このような:

これをチェックしてくださいhttp://jsfiddle.net/NgWLR/1/

于 2012-03-12T12:28:11.803 に答える