FireFox - Blinky Hover Divs - html

Question

So in FireFox / IE for some reason, my hover keeps blinking, I'm not quite sure why. Is it just better to do my hovers in javascript or is there an easier fix in CSS? Here's a JSFiddle to show what i mean - http://jsfiddle.net/eRBCa/
HTML
<div>
<div id="div1"></div>
<div id="div2">Test Div</div>
</div>
CSS
#div1{
width: 300px;
height: 275px;
background-color: yellow;
}
#div1:hover + #div2{
display: block;
}
#div2{
background-color: grey;
width: 300px;
height: 275px;
margin-top: -275px;
opacity: .9;
display: none;
}

Answer 1

It seems (without getting in to much technical details), that the :hover selector works differently in Chrome than in Firefox or IE. Namely, when #div2 gets visible, it becomes the "hovered" element and #div1 loses the 'hover' "attribute" (in FF or IE). That's what causes the flickering.
You could fix that by changing your CSS like this:
#div1:hover + #div2,
#div2:hover {
display: block;
}
See, also, this short demo.

Answer 2

The jitter effect is created because once you display the overlay, your mouse is now hovering the overlay instead of the original (#div1). You can fix this by looking at whether the parent element is hovered instead.
/* instead of #div1:hover + #div2, where .container is a class on the parent */
.container:hover #div2 {
display: block;
}
http://jsfiddle.net/eRBCa/1/

Answer 3

You can do something like this:
http://jsfiddle.net/eRBCa/4/
HTML
<div>
<div id="div1">
<div class="content">
content here
</div>
</div>
</div>
CSS
#div1{
width: 300px;
height: 275px;
background-color: yellow;
position:relative;
}
#div1:hover{ background-color:red; }
#div1:hover .content {display:block; }
.content {display:none; position:absolute; top:0; left:0}

Answer 4

You should call action earlier in html.
Once you hover div1, div2 comes on top, so you hover div2 and they are adjacent.
http://jsfiddle.net/GPCh3/
<div id="call">
<div id="div1"></div>
<div id="div2">Test Div</div>
</div>
#div1{
width: 300px;
height: 275px;
background-color: yellow;
}
#call:hover #div2{
display: block;
}
#div2{
background-color: grey;
width: 300px;
height: 275px;
margin-top: -275px;
opacity: .9;
display: none;
}