Flickering colors while hovering css

Question

I'm trying to use a background image over a semi-transparent div element, where hovering over either one changes the background color. However, I'm encountering a flickering effect when moving my mouse over either element.

<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; */
}

Here is a link to my code: http://jsfiddle.net/YTDyL/

Answer 1

What purpose does div.test serve?

The problem is it's overlapping div.first because it's positioned absolutely. Depending on your desired effect, you probably need to move div.test inside div.first (or vice versa). Whichever will be the container needs to be positioned (relative or absolute or otherwise) if it will hold a position: absolute; element.

Both elements are competing for :hover, since they overlap. Thus the flicker (as one gains and the other loses :hover, and back again, upon mouse movement).

jsfiddle.net/YTDyL/1

Answer 2

It is flickering when you move the pointer over the elements since they are having the same z-index and so both hover effect are triggering. If you add z-index attributes to both elements so one has a higher index then the other one, the flickering will not occur.

Here is a fiddle for you to see:

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

Answer 3

add z-index to .test

.test{z-index:99;}

Demo