悬停css时闪烁的颜色答案

【问题标题】：Flickering colors while hovering css悬停css时闪烁的颜色
【发布时间】：2013-07-08 18:11:27
【问题描述】：

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

【问题讨论】：

div.test 的作用是什么？问题是它的重叠 div.first 因为它是绝对定位的。可能需要将 div.test 移入 div.first （反之亦然）。两个元素都在竞争 :hover，因为它们重叠。 jsfiddle.net/YTDyL/1
你应该把它作为答案
你应该把它作为答案
是的，这是正确的。

标签： html css hover flicker

【解决方案1】：

div.test 有什么用途？

问题在于它与div.first 重叠，因为它是绝对定位的。根据您想要的效果，您可能需要将div.test 移动到div.first 内（反之亦然）。如果容器包含position: absolute; 元素，则需要定位容器（相对或绝对或其他）。

两个元素都在竞争:hover，因为它们重叠。因此闪烁（当一个获得而另一个失去:hover，并在鼠标移动时再次返回）。

jsfiddle.net/YTDyL/1

【讨论】：

为什么不把你的 jsFiddle 放在答案中？
它不会让我在没有嵌入代码的情况下链接到小提琴......以前在 SO 上从未见过。新功能？
哦，是的......这是为了遏制过度使用 jsFiddle 链接，而不是制作完全“独立”的答案。您仍然应该发布解决方案的代码......然后它也将允许您的 jsFiddle 演示链接。
非常感谢，工作就像一个魅力。也感谢您的快速回复。

【解决方案2】：

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

这里有一个小提琴供你看：

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

【讨论】：

【解决方案3】：

将 z-index 添加到 .test

.test{z-index:99;}

Demo

【讨论】：