css - z-index 和 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>

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

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