悬停css时闪烁的颜色

时间:2013-07-10 17:21:11

标签: html css hover flicker

我正在尝试在半透明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/

3 个答案:

答案 0 :(得分:4)

div.test的目的是什么?

问题是它重叠div.first,因为它绝对定位。根据您所需的效果,您可能需要在div.test内移动div.first(反之亦然)。无论哪个容器需要定位(相对或绝对或其他),如果它将容纳position: absolute;元素。

两个元素都在竞争:hover,因为它们重叠。因此,闪烁(一个人获胜,另一个人失去:hover,然后在鼠标移动时再次返回。)

jsfiddle.net/YTDyL/1

答案 1 :(得分:3)

当您将指针移到元素上时,它会闪烁,因为它们具有相同的z-index,因此两种悬停效果都会触发。如果向两个元素添加z-index属性,使得一个具有比另一个更高的索引,则不会发生闪烁。

这是一个小提琴,你可以看到:

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

答案 2 :(得分:1)

将z-index添加到.test

.test{z-index:99;}

Demo