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 & 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)的想法或提示?非常感谢!
a
元素和标记错误(尝试在span
内使用p
)。类名如sk_6
表明您应该采取不同的方法。 - Jukka K. Korpela