Would z-index affect elements from being "hovered" over? - html

Question

If I have a div that has another div beneath it, would the underlying div's hover state be activated when the cursor is over the top div? Assume that the top div has a z-index of 5 and the other div's z-index is 1.

Answer 1

The short answer is no.
Take the following code as an example:
HTML:
<div id="one">one</div>
<div id="two">two</div>
CSS:
div {
position: absolute;
height: 300px;
width: 300px;
}
div:hover {
background-color: yellow !important;
}
div#one {
top: 0;
left: 0;
background-color: red;
z-index: 10;
}
div#two {
top: 150px;
left: 150px;
background-color: green;
z-index: 1;
}
The hover never activates on div#one when div#two is hovered in the overlapping area.
http://jsfiddle.net/Yff7Q/

Answer 2

Just whipped together something quick.
An element within another element with :hover will work (even on negative z-index).
An element outside the element with the negative z-index won't work.
CodePen | JsFiddle
HTML:
<div class="box">
<div class="inside">
</div>
</div>
<br><br>
<div class="box">
</div>
<div class="outside"></div>
CSS:
.box{
position:relative;
height:250px;
width:250px;
opacity:.4;
background:red;
}
.outside, .inside{
background:blue;
height:100px;
width:100px;
position:absolute;
z-index:-5;
}
.outside{
top:400px;
}
.inside:hover{
opacity:0;
}
.outside:hover{
opacity:0;
}