3

IE 8 は、最初のツールチップ要素 "a[data-tooltip="sk_5 …" のみをアドレス指定し、その前の要素もアドレス指定します。

HTML:

<div class="skcontainer">
   <a class="specialClassifications classification classfication_6" href="/de/ueberuns/romantik-siegel" data-tooltip="sk_6"></a>
   <a class="specialClassifications classification classfication_9" href="/de/ueberuns/romantik-siegel" data-tooltip="sk_9"></a>
   <a class="specialClassifications classification classfication_112" href="/de/ueberuns/romantik-siegel" data-tooltip="sk_112"></a>
   <a class="specialClassifications classification classfication_8" href="/de/ueberuns/romantik-siegel" data-tooltip="sk_8"></a>
   <div class="sks sk_5"><span class="inner"><p>'Gelber Schlüssel' für Romantik Hotels &amp; Restaurants mit luxuriösem Angebot. Für Gäste, die höchste Ansprüche an Stil, Ambiente, Genuss und Gastlichkeit stellen.</p></span></div>
   <div class="sks sk_6"><span class="inner"><p>TEXT</p></span></div>
   <div class="sks sk_7"><span class="inner"><p>TEXT</p></span></div>
   <div class="sks sk_8"><span class="inner"><p>TEXT</p></span></div>
</div>

CSSは次のとおりです。

.sks {visibility:hidden; position: absolute; z-index: 100}
a[data-tooltip]:before {content: ""; position: absolute; visibility: hidden}
a[data-tooltip]:hover:before, a[data-tooltip="sk_5"]:hover ~ .sk_5,
a[data-tooltip="sk_6"]:hover ~ .sk_6, a[data-tooltip="sk_7"]:hover ~ .sk_7,
a[data-tooltip="sk_8"]:hover ~ .sk_8, a[data-tooltip="sk_9"]:hover ~ .sk_9,
a[data-tooltip="sk_10"]:hover ~ .sk_10, a[data-tooltip="sk_11"]:hover ~ .sk_11 {visibility: visible}

(CSS のみ) アイデアやヒントはありますか? どうもありがとう！

4

1 に答える 1

5

チルダは CSS3 セレクターであるため、IE7 & 8 ではバグがあります。IE8 の CSS2 機能と最新の CSS3 セレクターの間のギャップを埋める方法として、Modernizrの使用を検討してください。

残りのコメントに基づいて編集し ます。IE8 のサポートを中止することを検討している場合は、最初に分析をチェックして、影響を受ける人が多すぎないことを確認してください。チルダ セレクター + css ツールチップが機能しない場合は、リンクにタイトルを追加して、IE のユーザーが [明らかに醜い] ツールチップを引き続き表示できるようにする必要があります。

于 2013-06-18T14:35:55.450 に答える