Question

我必须＆＃34;提交＆＃34;输入类型（按钮）。实际上是汉堡棒和一个按钮。我做过响应式设计，需要显示div＆＃34; Anmelden＆＃34;当我在汉堡菜单上盘旋时（因为它的响应式设计）。这是我的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>

这里是CSS，这在某种程度上不起作用。

.hamburger{
font-size: 14px;
color: Gainsboro     ;
background: linear-gradient(to top, rgba(0, 51, 102,1), rgba(0, 89, 179,0.8)); 
font-family: sans-serif;
width: 9%;
margin-right: 15px;
margin-top: -35px;
height: 35px;
float: right;
border: 0px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 2px black;
}

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


.abmelden{
display: none;
font-size: 14px;
color: Gainsboro     ;
background: linear-gradient(to top, rgba(0, 51, 102,1), rgba(0, 89, 179,0.8)); 
font-family: sans-serif;
width: 7.5%;
margin-right: 15px;
margin-top: -35px;
height: 42px;
float: right;
border: 0px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 2px black;
}

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

Answer 1

#abmelden不是#hamburger的兄弟。

您应该使用#hamburger:hover ~ form #abmelden

~是一般的兄弟选择器，只选择兄弟姐妹的元素。兄弟姐妹是彼此相邻的元素并且在DOM中处于同一级别。因此，您必须放置form，然后放置要定位的表单的子元素（即#abmelden）。

.hamburger{
font-size: 14px;
color: Gainsboro     ;
background: linear-gradient(to top, rgba(0, 51, 102,1), rgba(0, 89, 179,0.8)); 
font-family: sans-serif;
width: 9%;
margin-right: 15px;
margin-top: -35px;
height: 35px;
float: right;
border: 0px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 2px black;
}

#hamburger:hover ~ form #abmelden{
display: inline-block;
}

#abmelden {
display:none;
}

.abmelden{

font-size: 14px;
color: Gainsboro     ;
background: linear-gradient(to top, rgba(0, 51, 102,1), rgba(0, 89, 179,0.8)); 
font-family: sans-serif;
width: 7.5%;
margin-right: 15px;
margin-top: -35px;
height: 42px;
float: right;
border: 0px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 2px black;
}

<nav style="margin-top:100px">
<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>

Answer 2

您可以将form tag打包在ID为hamburger的div中，然后应用hover：

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

从display:none取出.abmelden并将其添加到#abmelden，因为您希望div按要求中的显示进行显示

这是一个片段：

.hamburger {
  font-size: 14px;
  color: Gainsboro;
  background: linear-gradient(to top, rgba(0, 51, 102, 1), rgba(0, 89, 179, 0.8));
  font-family: sans-serif;
  width: 9%;
  margin-right: 15px;
  margin-top: -35px;
  height: 35px;
  float: right;
  border: 0px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 0px 2px black;
}

#hamburger:hover #abmelden {
  display: inline-block;
}

#abmelden {
  display: none;
}

.abmelden {
  font-size: 14px;
  color: Gainsboro;
  background: linear-gradient(to top, rgba(0, 51, 102, 1), rgba(0, 89, 179, 0.8));
  font-family: sans-serif;
  margin-right: 15px;
  margin-top: -35px;
  height: 42px;
  float: right;
  border: 0px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 0px 2px black;
}

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

通过将另一个div与css一起悬停，显示一个用表单操作包装的div

2 个答案: