当有人将鼠标悬停在div上时显示另一个div

Question

我有2个单独的div标签。当有人在div1上盘旋时，我希望div2出现。 这就是我想要实现的目标..

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; }

这就是我正在尝试的......它不起作用。当我悬停div1时，我无法显示div2。我在网上搜索但无法找到我想要的东西。任何想法如何做到这一点。我很欣赏这种方式。提前谢谢..

Answer 1

让.div1成为.div2的孩子，如：

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

然后是CSS：

.div2 {
    display: none;
}

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

.div2:hover {
    display: block;
}

并添加你的CSS。

Answer 2

尝试：

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

Answer 3

试试这个

.div2 {
    display: none;
}

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

.div2:hover {
    display: block;
}

最好使用＃div1和#div2之类的ID，因为类要为多个元素指定样式。

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

试试这个（它修复了闪烁的问题，你也可以与第二个div进行交互）：

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

DEMO

（当你将鼠标悬停在.div1上时，这基本上可以切换两个div的z指数）

Answer 6

你应该像~一样使用这样的效果：

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