IE8 CSS选择器〜（波形）只寻址第一个元素 [英] IE8 CSS selector ~ (tilde) addresses only first element

问题描述

IE 8将仅处理第一个工具提示元素a [data-tooltip =sk_5 ...，而不是之前的工具提示元素。

IE 8 will address only the first tooltip element "a[data-tooltip="sk_5 …" instead the preceeding ones too.

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）想法或提示？非常感谢！

Any (CSS only) ideas or hints? Thanks a lot!

推荐答案

因为波浪号是CSS3选择器，这是在IE7& 8 。考虑使用 Modernizr 来弥合IE8的CSS2功能和现代CSS3选择器之间的差距。

Because the tilde is a CSS3 selector, it is buggy in IE7 & 8. Consider using Modernizr as a way to bridge the gap between IE8's CSS2 capabilities and modern CSS3 selectors.

根据其余评论进行修改：
如果您考虑取消对IE8的支持，请先检查您的分析，确保太多人赢得受影响。如果波浪号选择器+ css工具提示不工作，你应该确保添加一个标题的链接，所以IE的人仍然可以看到[承认丑陋的]工具提示。

Edit based on the rest of the comments: If you're considering dropping support for IE8, check your analytics first to make sure too many people won't be affected. If the tilde selector + css tooltips aren't working, you should make sure to add a title to the links so people in IE can still see [admittedly ugly] tooltips.

这篇关于IE8 CSS选择器〜（波形）只寻址第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！