IE8 CSS选择器 ~（波浪线）只能定位到第一个元素。

Question

IE8 CSS选择器 ~（波浪线）只能定位到第一个元素。

cssinternet-explorer-8css-selectorstooltip

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

- mikeg

1

你好，欢迎来到SO，并祝贺您提出了一个带有相关代码的好问题。与人们分享问题的好方法是将您的代码放在jsfiddle上=> http://jsfiddle.net/ - Jaay

请你把整段代码放到JSFiddle里面好吗？我不确定你想实现什么。顺便提一下，当我打开IE 8时，它甚至无法正确启动JSFiddle :DDD - Ms. Nobody

请解释您想要实现的目标以及为什么使用看起来有些奇怪的代码。您有带有空内容的a元素和标记错误（尝试在span内使用p）。类名如sk_6表明您应该采取不同的方法。 - Jukka K. Korpela

我尝试过了，但IE8不支持。无论如何，我们开始吧。请注意，我无法在那里测试它：http://jsfiddle.net/mikeg/WL9Sn/9/感谢您的支持。 - mikeg

HTML不是我编写的。我重写了CSS，因为采用了仅CSS的方法，并清理了HTML以获得更好的可读性。目的是通过悬停在由a封装的图像上显示工具提示。更改HTML是不可能的... - mikeg

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cattsan · Accepted Answer

因为波浪号是CSS3选择器，所以在IE7和8中它会出现错误。考虑使用Modernizr作为一种方法来填补IE8的CSS2功能与现代CSS3选择器之间的差距。 根据其他评论进行编辑： 如果您考虑放弃对IE8的支持，请先检查您的分析数据，确保不会有太多人受到影响。如果波浪号选择器+ CSS工具提示无法工作，则应确保将标题添加到链接中，以便IE用户仍然可以看到[明显丑陋的]工具提示。