幻燈片閃爍圖像上：懸停

我創建某種幻燈片。當您將鼠標懸停在圖片上時，圖片會展開並與其他圖片重疊。但是，當這種情況發生時，我仍然希望在擴展圖像後面的圖像在其區域上懸停時工作。幻燈片閃爍圖像上：懸停

現在它幾乎完美運行，只有當您將鼠標懸停在其上時，展開的圖像纔會閃爍。我不想那樣。我該如何解決這個問題？

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

幻燈片閃爍圖像上：懸停

回答

相關問題