我正在尝试在半透明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/
答案 0 :(得分:4)
div.test
的目的是什么?
问题是它重叠div.first
,因为它绝对定位。根据您所需的效果,您可能需要在div.test
内移动div.first
(反之亦然)。无论哪个容器需要定位(相对或绝对或其他),如果它将容纳position: absolute;
元素。
两个元素都在竞争:hover
,因为它们重叠。因此,闪烁(一个人获胜,另一个人失去:hover
,然后在鼠标移动时再次返回。)
答案 1 :(得分:3)
当您将指针移到元素上时,它会闪烁,因为它们具有相同的z-index,因此两种悬停效果都会触发。如果向两个元素添加z-index
属性,使得一个具有比另一个更高的索引,则不会发生闪烁。
这是一个小提琴,你可以看到:
答案 2 :(得分:1)