Question

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

现在它几乎完美无缺，只有当您将鼠标悬停在展开图像上时，展开的图像才会闪烁。我不希望这样。我该如何解决这个问题？

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

幻灯片显示闪烁图像：悬停

1 个答案: