懸停css時閃爍的顏色

Question

我想在半透明div元素上使用背景圖像，其中懸停在任何一個更改背景顏色。但是，將鼠標移至任一元素上時，我遇到了閃爍效果。

<div class="container"> 
    <div class="test"></div> 
    <div class="first box"></div> 
    <div class="third box">third</div> 
    <div class="second box">second</div> 
    <div class="fourth box">fourth</div> 
    <div class="last box">last</div> 
</div> 

CSS：

html, body, 
.container { 
    height: 100%; 
    min-height: 100%; 
} 

.box { 
    width: 191px; 
    height: 145px; 
    margin: 4px; 
    float: left; 
    background-color: black; 
} 

.box:hover{ 
    background-color:#EF6939; 
    opacity: 1; 
    overflow: hidden; 
} 

.test:hover{ 
    background-color:#EF6939; 
    overflow: hidden; 
} 

.test { 
    width: 191px; 
    height: 145px; 
    margin: 4px; 
    float: left; 
    position: absolute; 
    /* background-image: url(test.png);*/ 
} 

.first { 
    /* float: left; */ 
    /* background-color: red; */ 
    opacity: 0.1; 
} 

.second{ 
    /*  float: left;*/  
    /* background-color: green; */ 
} 

.third{ 
    /* float: right; */ 
    /* background-color: blue; */ 
} 

.fourth { 
    /* float: right; */ 
    /* background-color: #DDDDDD; */ 
} 

.last{ 
    /* float: right; */ 
    /* background-color: yellow; */ 
} 

這裏是我的代碼的鏈接： http://jsfiddle.net/YTDyL/

Answer 1

什麼用途div.test服務？

問題是它重疊div.first，因爲它的位置絕對。根據您的預期效果，您可能需要將div.test移至div.first（反之亦然）。無論哪個容器需要定位（相對或絕對或其他方式），如果它將容納一個position: absolute;元素。

這兩個元素都競爭:hover，因爲它們重疊。因此，閃爍（隨着鼠標移動而增加，另一個丟失，並且再次返回）。

jsfiddle.net/YTDyL/1

Answer 2

時超過，因爲它們具有相同的z-index等既懸停效果被觸發元件移動指針它閃爍。如果將z-index屬性添加到這兩個元素，那麼其中一個具有較高的索引，那麼另一個則不會發生閃爍。

這裏是一個小提琴給你看：

http://jsfiddle.net/YTDyL/3/

Answer 3

添加的z-index到.test

.test{z-index:99;} 

Demo