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 中是错误的。考虑使用Modernizr作为弥合 IE8 的 CSS2 功能和现代 CSS3 选择器之间差距的一种方式。

根据其余评论进行编辑： 如果您正在考虑放弃对 IE8 的支持，请先检查您的分析，以确保不会有太多人受到影响。如果波浪号选择器 + css 工具提示不起作用，您应该确保为链接添加标题，以便 IE 中的人仍然可以看到 [不可否认的丑陋] 工具提示。

于 2013-06-18T14:35:55.450 回答