3

「クイックリンク」の最後に、最初のLIタグの：after疑似要素を使用して、スプライトファイルのアイコンを表示するフライアウトメニューがあります。

HTML：

<ul class="rs-quick-links-nav">
   <li>
    <a href="#">QUICK LINKS</a>
    <ul>
     <li><a href="#">Enhanced Recipe Search</a></li>
     <li><a href="#">Recipe Collections &amp; Favorites</a></li>
     <li><a href="#">Cooking Tips &amp; Techniques</a></li>
     <li><a href="#">Shopping &amp; Storing</a></li>
     <li><a href="#">Tools &amp; Products</a></li>
     <li><a href="#">New Uses for Old Things</a></li>
     <li><a href="#">Guide to Ingredients</a></li>
    </ul>
  </li>
</ul>

CSS：

.rs-quick-links-nav { position: absolute; top: 0; right: 20px; }
.rs-quick-links-nav > li { float: left; position: relative; white-space: nowrap; height: 19px; padding: 4px 0 4px 0; }
.rs-quick-links-nav > li > a { color: #999999; display: block; font: normal 1.2em Arial, sans-serif; }
.rs-quick-links-nav > li:after { content: ' '; background: transparent url('@static.base@/i/rs-global-sprite.png') -220px 0 no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
.rs-quick-links-nav > li > a:hover { text-decoration: none; }
.rs-quick-links-nav > li:hover:after { content: ' '; background: transparent url('global-sprite.png') -220px -20px no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
.rs-quick-links-nav li ul { background-color: #FFFFFF; border: 4px solid #69b8b8; left: -9999px; padding: 2px 8px; position: absolute; top: 24px; visibility: hidden; z-index: 9900; }
.rs-quick-links-nav li:hover ul { left: auto; right: -18px; visibility: visible; }
.rs-quick-links-nav li li { padding: 2px 0; }
.rs-quick-links-nav li li + li { border-top: 1px dotted #333333; }
.rs-quick-links-nav li li a { color: #666666; display: block; font: normal 1.2em/30px Arial, Verdana, sans-serif; height: 30px; padding: 0px 8px; }
.rs-quick-links-nav li li a:hover { background: #f6f6f6; }

LIタグにカーソルを合わせると、アイコンがアクティブな色に変わります。

.rs-quick-links-nav> li：hover：afterは、Firefox、Chrome、Safariで機能するようですが、IE8では機能しないようです（IE8より前は何も気にしません）。QuirksModeによると、IE8はおそらく：hoverと：afterをサポートしているので、.rs-quick-links-nav> li：hover：afterが機能しない理由がわかりません。誰かがこれを機能させる方法を知っていますか（Javascriptで何かをしなければならない場合でも）。

編集：DOCTYPEはHTML5のDoctypeです。

<!DOCTYPE html>

編集：JSFiddleフラグメントはこちら http://jsfiddle.net/tangst/hA7FH/

4

4 に答える 4

2

:after:hoverルールにを追加しますcontent:"";。これにより、再描画が強制されます

于 2013-12-12T13:31:20.483 に答える
1

あなたのDoctypeはどのように見えますか？

IE8は疑似セレクターを処理しますが、厳密なDoctypeがない場合、：hoverセレクターはアンカーでのみ機能します。

于 2013-01-15T04:01:23.843 に答える
1

いくつかの素晴らしいオプション：

  • シムを使用してください。これにより、（cssのカスケードの性質により）後付けして、「古いブラウザーのサポート不足」の問題を修正できます。例：http ：//selectivizr.com/

  • 古いブラウザでこの種のサポートを提供するjQuery1.8.1+を使用してください。

于 2013-01-24T23:52:50.187 に答える
0

結局、その要素のホバーイベントを制御し、そのように要素のスタイルを設定するために、Javascriptを作成する必要がありました。IE8では完全ではありませんが、機能しました。

于 2013-01-24T23:46:15.110 に答える