Display another div when someone hover over a div

Question

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

    <div class="div1">
       HOVER TO ADD DETAILS
    </div>
    <div class="div2">
        <input type="image" src="img1.png" name="btn1" value="btn1">
        <input type="image" src="img2.png" name="btn1" value="btn1">
        <input type="image" src="img3.png" name="btn1" value="btn1">
    </div>

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..

Answer 1

Make .div1 the child of .div2 like:

<div class='div1'><div class='div2'>...</div></div>

And then the CSS:

.div2 {
    display: none;
}

.div1:hover > .div2 {
    display: block;
}

.div2:hover {
    display: block;
}

And also add your CSS.

Answer 2

尝试：

 .div1:hover + .div2 {display:block; }

Answer 3

Try this

.div2 {
    display: none;
}

.div1:hover ~ .div2 {
    display: block;
}

.div2:hover {
    display: block;
}

Also it is better to use IDs like #div1 and #div2 as classes are to specify a style for more than one elements.

Answer 4

.div1 {
 background-color:#bcbcbc;
 width: 400px;
 height:45px;
}
.div2 {
 display:none;
 position:relative;
 width: 50px;
 margin:0 auto;
}
.div1:hover~.div2{
display: block;
}

Answer 5

Try this(it fixes the flickering issue and you can interact with the second div as well):

.div1 {
    z-index:1;
}
.div1:hover {
    z-index:0;
}
.div2 {
    z-index: 0;
}
.div2:hover {
    z-index:1;
}

DEMO

(this basically switches the z-indices of the two divs when you hover over .div1 )

Answer 6

您应该使用~来获得效果，如下所示：

.div1:hover ~ .div2 { display: block; }