幻灯片闪烁图像上：悬停

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

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

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

来源

2013-10-13 Midwoud

Working DEMO

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

哈弗上的div代替figure：

.expand_1:hover figure

来源

2013-10-13 16:18:06

好，感谢您的回答。我在看这个网页时提出了这个想法：[http://www.f-i.com/google/ramayana/](http://www.f-i.com/google/ramayana/）。在这个页面的中途，有一个我想要完成的例子。是否有另一种（简单）的方法来实现这一点？没有JS？ – Midwoud

@Midwoud查看使用替代CSS方法的第二个演示。 –

非常感谢！这就像一个魅力。但是当我希望它能够在所有的Web浏览器中工作时，唯一能让它工作的方法是使用JS？ – Midwoud

幻灯片闪烁图像上：悬停

回答

相关问题