I have 2 separate div tags. I want div2 to appear when someone hovers over div1.
This is what I am trying to achieve..
HTML
HOVER TO ADD DETAILS
CSS
.div1{ background-color:#bcbcbc; width: 400px; height:45px;}
.div2{ display:none; position:relative; width: 50px; margin:0 auto;}
.div1 > .div2 {display:block; }
This is what I am trying.. It is not working. I am not able to show div2 when I hover div1. I've searched over the net but not able to find what I want. any idea how to do this. I would appreciate a css way of doing it. Thanks in advance..
解决方案
Make .div1 the child of .div2 like:
And then the CSS:
.div2 {
display: none;
}
.div1:hover > .div2 {
display: block;
}
.div2:hover {
display: block;
}
And also add your CSS.