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

【问题标题】：Display another div when someone hover over a div当有人将鼠标悬停在 div 上时显示另一个 div
【发布时间】：2013-12-09 07:32:50
【问题描述】：

我有 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。我在网上搜索过，但找不到我想要的。任何想法如何做到这一点。我会很感激这样做的CSS方式。提前谢谢..

【问题讨论】：

您是否尝试在悬停时减少div-1 的z-index？
我没有尝试过 z-index，因为 div2 没有出现。它返回或返回是一个单独的问题。
类似this
是的，我想要同样的效果。但为什么会闪烁？？
我不完全确定。可能是因为当您将鼠标悬停在 div1 上时，它的 z-index 会减小并且 div2 会出现。所以现在你将鼠标悬停在 div2 上

标签： html css

【解决方案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。

【讨论】：

【解决方案2】：

试试：

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

【讨论】：

【解决方案3】：

试试这个

.div2 {
    display: none;
}

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

.div2:hover {
    display: block;
}

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

【讨论】：

那是一个后代选择器，.div1 和 .div2 是兄弟。 .div1:hover + .div2 或 .div1:hover ~.div2 可以。
我试过这样做..但在课堂上做到了.. .div1:hover .div2 {display:block ;} 什么也没发生..
您还必须添加 .div2:hover { display:block}，因为一旦 .div2 出现，您将不再将鼠标悬停在 .div1 上
我已经尝试了所有方法，但我不知道问题是什么..我仍然无法让 div2 出现在悬停上..
我猜对了。我将 Div2 设为 div1 <div class="div1">... <div class="div2"> ... </div> </div> 的孩子，我使用了 div1:hover > div2 {display:block;}

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

DEMO

（当您将鼠标悬停在.div1 上时，这基本上会切换两个 div 的 z-indices）

【讨论】：

【解决方案6】：

你应该像这样使用~来获得效果：

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

【讨论】：

是的，我能够让它与 ~ 一起工作，但是当我移动鼠标时它开始闪烁开关......任何解决方案......
当鼠标移动到 div2 时，它实际上会闪烁。当鼠标在 div1 上时，它会一直保持在那里。