1

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

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

演示

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

1 回答 1

2

工作演示

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

悬停在div而不是figure：

.expand_1:hover figure
于 2013-10-13T16:18:06.630 回答