z 索引和 Internet Explorer 9

Question

我有 2 个元素，2 个尺寸完全相同的图像，将一个放在另一个之上。假设它们被称为 A 和 B（A 是最上面的）。我所做的就是当你将鼠标悬停在 A 上时，它的 z-index 递减 2，这样 B 现在位于顶部，并且 B 的悬停：将其 z-index 增加 2，所以它现在比 A 的原始值高 1 z-index（因此图像 B 保持在顶部，直到您移开鼠标）。所以基本上...

#A {z-index: 5;}
#B {z-index: 4;}

#A:hover {z-index: 3;}
#B:hover {z-index: 6;}

这在 Firefox 和 Chrome 中完美运行，但 IE 不想听到它，并且我的图像在悬停在它们上方时一直令人惊叹。任何帮助表示赞赏。定位是绝对的，如果这很重要的话。

@jklm313

这实际上也适用于我的 IE9。也许我应该发布完整的代码，因为我的其中一个“图像”实际上是一个社交网络按钮。所以这里是：

HTML:

<div id="myTweetBrown"></div>
<div id="myTweet"><?php include ("myPHP/homepageSoc/tweet.php") ?></div>

CSS:

#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}

#myTweetBrown:hover {
position: absolute;
z-index: 3;
}

#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 4;
}

#myTweet:hover {
position: absolute;
z-index: 6;
}

tweet.php:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://localhost/Joomla173/index.php?option=com_content&amp;view=article&amp;id=69&amp;Itemid=507" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

链接到演示网站： ***** -- 向下滚动到推文按钮 这个只会持续这么长时间，因为我不希望人们有这样的访问权限<.<

Answer 1

现在已经提供了源代码，我只想重写我的整个答案。

所有“现代”版本的 IE，当不处于怪异模式时，都可以完美地接受此代码以用于 div 和链接。 IE 中的问题出现在 iframe 和其他异常元素上，此时其渲染引擎似乎出现故障。 （震惊！） 您会无缘无故地看到这种闪烁，除了 iframe 和页面中可能存在冲突的文档类型之外，如果可能的话，我也会尝试避免这种情况。

假设此链接是由 twitter 生成的，我建议使用 IE 的后备方法。我不会在按钮图像和 twitter 提供的按钮图像之间徘徊，而是使用 javascript 操作 iframe 内提供的 twitter 按钮的 css。

document.getElementsByTagName('iframe')[0].getElementsByTagName('a')[0].className += 'myTweetBrown';

该按钮看起来是由 HTML5 生成的，而不是静态图像，因此操作起来应该不难：

.myTweetBrown:hover {
    background-image: url('../images/tweetBrown.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    height: 20px !important;
    width: 55px !important;
 }

.myTweetBrown:hover * {
    display: none;
 }

您可以采取的另一种方法是继续执行之前所做的操作，但应用不同的样式，如下所示，具体取决于展示：

#myTweetBrown {
    position: absolute;
    background-image: url('../images/tweetBrown.png');
    background-repeat: no-repeat;
    background-position: center center;
    height: 20px;
    width: 54px;
    left: 381px;
    top: 662px;
    z-index: 5;
}

#myTweetBrown:hover {
    opacity: 0;
}

#myTweet {
    position: absolute;
    height: 20px;
    width: 54px;
    left: 381px;
    top: 662px;
    z-index: 3;
}

Answer 2

从技术上讲，CSS 实际上并没有指定元素如何以及何时进入和退出“悬停”状态。因此，听起来当 A 进入 B 下方时，您的 IE 版本会从 A 中删除悬停状态，并立即弹出到 B 前面，然后 B 获得悬停状态并进一步弹出到前面。

将两者包装在一个 div 中，并测试其悬停状态怎么样？那有用吗？

http://jsfiddle.net/X64au/

Answer 3

尝试将它们包裹在 div 中

.parent
{
   position:relative;
   z-index:1000;
}
.a
{
  position: absolute;
  z-index : 1001;
  display: inline-block;
}
.b
{
  position: absolute;
  z-index: 1002;
  display: inline-block;
}