Css z索引和Internet Explorer 9

我有两个元素，两个尺寸完全相同的图像，一个放在另一个上面。假设它们被称为A和B（A是最上面的一个）。我所做的是，当你将鼠标悬停在A上时，它的z索引递减2，这样B现在位于顶部，而B的悬停：将它的z索引递增2，这样它现在比A的原始z索引高1（因此，图像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:

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>

!函数（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）；}（文档，“脚本”，“twitter wjs”）；

指向演示网站的链接：******--向下滚动至Tweet按钮

---

这只会持续很长时间，因为我不希望人们有这样的访问权限从技术上讲，CSS实际上并没有指定元素进入和退出“悬停”状态的方式和时间。所以听起来好像当A在B下时，你的IE版本从A中移除了悬停状态，它会立即弹回到B的前面，然后B得到悬停状态，弹到前面

将两者包装在一个div中，并测试其悬停状态如何？这样行吗

---

现在我要重写我的全部答案，源代码已经提供

IE的所有“现代”版本，当不处于怪癖模式时，都完全接受此代码作为div和link。IE中的问题出现在iFrame和其他不寻常的元素上，此时它的渲染引擎似乎失败了。（震惊！）您将看到这种闪烁，除了iframe和page中可能存在冲突的doctype之外，没有任何明显的原因，如果可能的话，我也会尽量避免这种情况

假设这个链接是由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;
}

试着把它们包起来

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

---

听起来很像-数字56。不，它在FF和Chrome中工作，但在IE中不工作。=/谢谢。值得一试。我猜tweet按钮javascript可能在做各种各样的恶作剧。当元素最初被悬停在上面时，应该会发生这种情况，但是当鼠标停留在b元素上时，b元素应该保持悬停状态，所以除了鼠标第一次在元素上移动时的闪烁之外，不应该有任何“间歇”。但出于某种原因，它的行为就好像b:hover根本不存在，所以它一直在闪烁。twitter代码正在为按钮创建一个“可爱的”iframe。。。我有一种感觉，这可能与这个问题有关，只要看看谷歌搜索iframe z-index就可以了。这个代码和我的代码一样，但对我来说不起作用。显然，元素b由于某种原因无法保持悬停状态。至少对我来说…页面上肯定有其他干扰，你能把我们链接到一个演示站点吗？我能，我会编辑我的第一篇文章，然后马上发布链接。你有一个iframe在里面吗？我认为这就是问题的根源——删除iframe，它似乎可以正常工作。我不能，因为这是我从twitter网站上复制的twitter按钮代码=/

#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;
}

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