悬停/鼠标悬停未在 IE 中触发，图像挡住答案

【问题标题】：Hover/mouseover not firing in IE, image in the way悬停/鼠标悬停未在 IE 中触发，图像挡住
【发布时间】：2011-04-09 22:50:23
【问题描述】：

我有一个 div，在该 div 中是一个图像，在它们之上是 2 个 div，它们附加了 jquery hover（虽然 onmouseover 的问题相同，所以不是 jquery）。

问题是图像加载时，即使 div 放置在图像顶部，它们也不会触发，因为图像总是在顶部（即使它实际上不是，我已经尝试将它放置降低 z-index 但没有帮助）。

jquery:

<script type="text/javascript">
$(document).ready(function () {
    $(this).find("#largeInset").find(".content").css("width","0");

    $("#largeInset").hover (function() { 
        $(this).find(".content").animate({width: '100%'}, 500, function() {});
    },
    function() { 
        $(this).find(".content").animate({width: '0'}, 500, function() {});
    });


    $(this).find("#largeArticles").find(".content").css("width","0");

    $("#largeArticles").hover (function() { 
        $(this).find(".content").animate({width: '40%'}, 500, function() {});
    },
    function() { 
        $(this).find(".content").animate({width: '0'}, 500, function() {});
    });

});
</script>

HTML：

<div class="largeContent">
    <img src="<?php  echo $img[0]; ?>" border="0" alt="" title="" />
        <div id="largeInset">
            <div class="content">
            [content]
            </div>
        </div>
        <div id="largeArticles">
            <div class="content">

            <ul> (loop fills this)
                <li>
                [content]
                </li>
            </ul>
            </div>
            <br style="clear: both;" />
        </div>
    </div>

这是一个我以前从未遇到过的已知 IE 错误吗？还是我的代码中有错误？当填充内容时， largeInset 和 largeArticles div 应该在悬停时触发并滑出图像，在 chrome 中工作，但不是 IE，因为 IE 似乎选择了 div 顶部的图像，即使它们实际上在它下面（如果图片未加载）。

有什么想法吗？希望我说得通。

CSS：

    .articles { position: relative; width: 100%; padding: 0; float: left; background-color: #fff; }
.large { margin: 0 0 10px; border: 0px solid #000; min-height: 200px; }
.large img { max-width: 100%; min-width: 100%; min-height: 350px; z-index: -1; }

.largeContent { z-index: 99; position: absolute; top: 0; width: 100%; height: 100%; }
.filler { width: 100%; height: 100%; }
#largeInset { position: absolute; top: 0; right: 0; min-height: 100%; width: 25%; color: #fff; }
#largeInset .head { padding: 10px 0; }
#largeInset p { font-size: 0.9em; margin: 5px 10px; }
#largeInset .content { overflow: hidden; position: absolute; top:0; background-color: #000; right: 0; color: #fff; }

#largeArticles { position: absolute; top: 0; left: 0; width: 25%; min-height: 100%; }
#largeArticles .content { overflow: hidden; position: absolute; top: 0; left: 0; width: 40%; background-color: #000; }

【问题讨论】：

你能用你在html中展示的这段内容提供一个css吗？
添加了 css，但不是很漂亮。

标签： javascript jquery css internet-explorer

【解决方案1】：

我现在通过向 div 添加内容解决了这个问题。 IE 只会在您将鼠标悬停在 div 中的内容上时触发（可能是因为位置是绝对的？）。我在 div 中添加了一个透明的 1px 图像，但拉伸到 100% x 100%，所以你将鼠标悬停在图像上，它会触发。

这似乎有点被破解了

参见http://iamnotahippy.com/ice/web/?cat=5（将鼠标悬停在图像的两侧）

【讨论】：