当有人将鼠标悬停在div上时显示另一个div [英] Display another div when someone hover over a 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屋！