当有人将鼠标悬停在div上时显示另一个div [英] Display another div when someone hover over a div
本文介绍了当有人将鼠标悬停在div上时显示另一个div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有2个单独的div标签。我希望当有人将鼠标悬停在div1上时显示div2。
这是我要实现的目标。.
I have 2 separate div tags. I want div2 to appear when someone hovers over div1. This is what I am trying to achieve..
<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
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。我已经在网上搜索了,但找不到我想要的东西。任何想法如何做到这一点。我将赞赏使用CSS的方法。
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..
推荐答案
使.div1为.div2的子对象,例如:
Make .div1 the child of .div2 like:
<div class='div1'><div class='div2'>...</div></div>
然后是CSS:
.div2 {
display: none;
}
.div1:hover > .div2 {
display: block;
}
.div2:hover {
display: block;
}
并添加CSS。
这篇关于当有人将鼠标悬停在div上时显示另一个div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文