悬停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.first中移动div.test (反之亦然)。如果容器将包含position: absolute;元素，则需要对容器进行定位(相对或绝对或其他)。

这两个元素都在争夺:hover，因为它们是重叠的。因此，闪烁(当一个获得和另一个失去:hover，并再次回来，鼠标移动)。

jsfiddle.net/YTDyL/1

Answer 2

当您将指针移动到元素上时，它会闪烁，因为它们具有相同的z索引，因此两种悬停效果都会触发。如果将z-index属性添加到两个元素中，以便其中一个元素的索引高于另一个元素，则不会发生闪烁。

这里有一个你可以看到的小提琴：

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

Answer 3

将z索引添加到.test

.test{z-index:99;}

Demo