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

时间:2013-12-09 07:32:50

标签: html css

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

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。我在网上搜索但无法找到我想要的东西。任何想法如何做到这一点。我很欣赏这种方式。提前谢谢..

6 个答案:

答案 0 :(得分:2)

让.div1成为.div2的孩子,如:

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

然后是CSS:

.div2 {
    display: none;
}

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

.div2:hover {
    display: block;
}

并添加你的CSS。

答案 1 :(得分:1)

尝试:

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

答案 2 :(得分:1)

试试这个

.div2 {
    display: none;
}

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

.div2:hover {
    display: block;
}

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

答案 3 :(得分:1)

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

答案 4 :(得分:1)

试试这个(它修复了闪烁的问题,你也可以与第二个div进行交互):

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

DEMO

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

答案 5 :(得分:0)

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

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