幻灯片上闪烁的图像：悬停答案

【问题标题】：Slideshow flickering image on :hover幻灯片上闪烁的图像：悬停
【发布时间】：2013-10-21 06:05:51
【问题描述】：

我正在制作某种幻灯片。当您将鼠标悬停在图像上时，图像将展开并与其他图像重叠。但是当发生这种情况时，我仍然希望展开图像后面的那些图像在悬停在其区域上时能够正常工作。

现在它几乎可以完美运行，当您将鼠标悬停在它上面时，只有展开的图像会闪烁。我不想要那个。我该如何解决这个问题？

HTML：

<div id="expand">
    <div class="expand_1">
        <figure></figure>
    </div>
    <div class="expand_2">
        <figure></figure>
    </div>
    <div class="expand_3">
        <figure></figure>
    </div>
    <div class="expand_4">
        <figure></figure>
    </div>
</div>

CSS：

#expand {
    height: 200px;
}

.expand_1 {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
}

.expand_1 figure {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    background: grey;
}

.expand_1 figure:hover {
    width: 400px;
    height: 200px;
    float: left;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: grey;
}

.expand_2 {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
}

.expand_2 figure {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    background: black;
}

.expand_2 figure:hover {
    margin-left: -100px; 
    width: 400px;
    height: 200px;
    float: left;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: black;
}

.expand_3 {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
}

.expand_3 figure {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    background: green;
}

.expand_3 figure:hover {
    margin-left: -200px; 
    width: 400px;
    height: 200px;
    float: left;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: green;
}

.expand_4 {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
}

.expand_4 figure {
    width: 100px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    background-color: blue;
}

.expand_4 figure:hover {
    margin-left: -300px; 
    width: 400px;
    height: 200px;
    float: left;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: blue;
}

【问题讨论】：

标签： html css image hover slideshow

【解决方案1】：

Working DEMO

不要使用pointer-events: none; 会导致闪烁效果。旧的 IE 浏览器也不支持。

将鼠标悬停在div 而不是figure：

.expand_1:hover figure

【讨论】：

好的，谢谢您的回答。我在查看此页面时提出了这个想法：http://www.f-i.com/google/ramayana/。在该页面的中途有一个我正在尝试完成的示例。是否有另一种（简单的）方法来实现这一点？没有 JS？
@Midwoud 查看使用替代 CSS 方法的第二个演示。
非常感谢！这就像一个魅力。但是当我希望它在所有网络浏览器中工作时，让它工作的唯一方法是使用 JS？