Html 通过使用css悬停另一个div，显示一个用表单动作包装的div

我必须“提交”输入类型（按钮）。实际上是汉堡包吧和一个按钮。我已经完成了响应性设计，当我在汉堡包菜单上悬停时需要显示div“Anmelden”（因为它是响应性设计）。这是我的html和css

<nav>
<div id = "hamburger">
    <input type = "submit" value="☰" class ="hamburger">
</div>
<form action ="login.html">
    <div id="abmelden">
        <input type = "submit" value="Abmelden" class = "abmelden">
    </div>
</form>
</nav>

出了什么问题，如何解决？

\abmelden

不是汉堡包的兄弟姐妹

您应该使用

#hamburger:hover~form#abmelden

~

是常规同级选择器，仅选择同级元素。同级元素是彼此相邻且在DOM中处于同一级别的元素。因此，您必须先放置

表单

，然后放置要定位的表单子元素（即

#abmelden

）

。汉堡包{
字体大小：14px；
颜色：Gainsboro；
背景：线性梯度（到顶部，rgba（0,51,102,1），rgba（0,89,179,0.8））；
字体系列：无衬线；
宽度：9%；
右边距：15px；
利润上限：-35px；
高度：35px；
浮动：对；
边框：0px实心#ccc；
边界半径：5px；
盒影：0px 0px 2px黑色；
}
#汉堡包：悬停~form#abmelden{
显示：内联块；
}
#阿卜梅尔登{
显示：无；
}
阿卜梅尔登先生{
字体大小：14px；
颜色：Gainsboro；
背景：线性梯度（到顶部，rgba（0,51,102,1），rgba（0,89,179,0.8））；
字体系列：无衬线；
宽度：7.5%；
右边距：15px；
利润上限：-35px；
高度：42px；
浮动：对；
边框：0px实心#ccc；
边界半径：5px；
盒影：0px 0px 2px黑色；
}

---

您可以将

表单标签

用id

hamburger

包装在您的div中，并应用

悬停

：

#hamburger:hover #abmelden{
    display: inline-block;
}

从

.abmelden

中取出

display:none

，并将其添加到

#abmelden

中，因为您希望

div

按您的要求显示

以下是一个片段：

。汉堡包{
字体大小：14px；
颜色：Gainsboro；
背景：线性梯度（到顶部，rgba（0,51,102,1），rgba（0,89,179,0.8））；
字体系列：无衬线；
宽度：9%；
右边距：15px；
利润上限：-35px；
高度：35px；
浮动：对；
边框：0px实心#ccc；
边界半径：5px；
盒影：0px 0px 2px黑色；
}
#汉堡：哈弗#阿伯梅尔登{
显示：内联块；
}
#阿卜梅尔登{
显示：无；
}
阿卜梅尔登先生{
字体大小：14px；
颜色：Gainsboro；
背景：线性梯度（到顶部，rgba（0,51,102,1），rgba（0,89,179,0.8））；
字体系列：无衬线；
右边距：15px；
利润上限：-35px；
高度：42px；
浮动：对；
边框：0px实心#ccc；
边界半径：5px；
盒影：0px 0px 2px黑色；
}

@PegasusThorn您在CSS中对

#abmelden

使用了错误的选择器。它应该是

#abmelden

而不是

。abmelden

我现在把它改成了#abmelden，但是当我在汉堡包上悬停时，不知怎么的什么都没有发生，什么都没有。@PegasusThorn我刚刚意识到你有一个id为“abmelden”的div和类为“abmelden”的输入。您的

：hover

CSS显示了div，但输入仍然隐藏。我将

display:none

移动到一个以ID为目标的新规则集。检查我答案中的代码段，它正在工作。看起来不太好。我不知道你想怎么做。

#hamburger:hover #abmelden{
    display: inline-block;
}