html - :hover 上的幻灯片闪烁图像

Question

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

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

DEMO

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

Answer 1

Working DEMO

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

将鼠标悬停在 div 而不是 figure 上:

.expand_1:hover figure