悬停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