Having trouble with a hidden div container not displaying properly upon hovering over a visible div container.
When d1 is hovered over, d2 appears but with a blinking effect. Here is my code:
Note: I want d1 to remain visible and use d2 for displaying text over d1.
CSS:
.website{
width:400px; height:400px; background: black;
}
.website .d1, .website .d2{
width:100%; height:100%; float:left;
}
.d1{
background:red;
width:100%; height:100%; float:left
}
.d2{
background:blue;
margin-top:-400px; display:none; z-index:100;
}
.d1:hover + .d2 {
display: block;
}
HTML:
<div class='website'>
<div class='d1'></div>
<div class='d2'></div>
</div>