Question

这是我在这里的第一篇文章，尽量尽量清楚，并希望我遵守网站的规则。

不久前我开始玩一些HTML / CSS，我很擅长但是我猜不够，我希望能在这里得到一些帮助。

我试图建立一个导航菜单，我希望它具有的功能之一就是当我将鼠标悬停在 ＆＃34;帐户＆＃34; < / em> 按钮它应该在中间拆分菜单并显示一个新的部分，用户可以登录到他或她的帐户。

这是我到目前为止所得到的，由于某种原因，当我将鼠标悬停在 ＆＃34;帐户＆＃34; div上时，我无法产生效果但是当我将悬停效果应用于整个顶部div（其中＆＃34;帐户div是其中的一部分）时，它就会起作用。尝试了所有＆＃34;链接＆＃34;方法建议in this post但仍然没有......最后一件事：当我在.middle overflow: hidden;上div时，它在顶部和底部divs之间添加了一个空格。< / p>
我非常感谢任何帮助，如果可以将它留在CSS级别（没有任何jQuery或任何其他编码）

提前致谢，托尼。

＆＃13;
＆＃13;
.container { width: 560px; height: auto; } .top { height: 50px; background-color: red; } .top-L { float: right; padding: 5px 20px; } .top-R { float: right; padding: 5px 20px; height: 50px; display: block; } .middle { height: 0px; width: 560px; overflow: hidden; background-color: blue; transition: .4s ease; } .bottom { height: 50px; background-color: green; } .top:hover + .middle { height: 50px; transition: .4s ease; } .middle:hover { height: 50px; }
＆＃13;
<html> <body style="font-family: sans-serif; background-color: #ccc;"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <div class="top"> <div class="top-L">Other</div> <div class="top-R">Account</div> </div> <div class="middle"> <div> <input type="text" placeholder="Enter Username" name="uname" required> <input type="password" placeholder="Enter Password" name="psw" required> </div> </div> <div class="bottom"></div> </div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 1

更新的答案

您目前的结构无法满足您的需求。但是，我们可以通过Click而不是Hover来完成。 进行一些更改：）。它不是完美的解决方案，但应该适合您的情况。

＆＃13;

*{
	box-sizing: border-box;
}

.container {
  width: 560px;
  height: auto;
}

.top {
  /* height: 50px; */
  background-color: red;
	display: flex;
	justify-content: flex-end;
}

.top-L label, .top-R label{
	padding: 20px;
}

.top-L {
  order: 1;
	padding: 20px;
}

.top-R {
  padding: 20px;
}

.middle {
  height: 0px;
  width: 560px;
  overflow: hidden;
  background-color: blue;
  transition: .4s ease;
}

.bottom {
  height: 50px;
  background-color: green;
}
.top:hover + .middle {
  /* height: 50px; */
  transition: .4s ease;
	

}
#account{
	display: none;
}
#account:checked + .middle{
	height: 50px;
	padding: 10px;
}

.middle:hover {
  /* height: 50px; */
}

＆＃13;

<div class="container">
  <div class="top">
    <div class="top-L">Other</div>
    <div class="top-R" ><label for="account">Account</label> </div>
  </div>
  <input type="checkbox" id="account"/>
  <div class="middle">
    <div>
			
      <input type="text" placeholder="Enter Username" name="uname" required>
      <input type="password" placeholder="Enter Password" name="psw" required>
    </div>
  </div>
  <div class="bottom"></div>
</div>

＆＃13;

Answer 2

如果我是对的，这会对你有帮助，

nav > ul > li {
  display: inline-block
}
nav > ul > li ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  transition: 0.2s 1s;
}
nav > ul > li:hover ul {
  visibility: visible;
  transition-delay: 0s;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li {
  width: 100px;
  background: #eee;
  margin: 2px;
  position: relative;
  padding: 10px;
}
nav a {
  display: block;
  
}

body {
  padding: 10px;
}

<nav>
  <ul>
    <li><a href="">Last</a></li>
    <li><a href="">one</a></li>
    <li><a href="">is</a></li>
    <li>
      Dropdown
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

@Tony Mor对你现有的css做了一些修改。我相信这就是你想要的。

.top-R {
  float: right;
  padding: 5px 20px;
  display: block;
}

和

.middle div {
   padding-left: 10px;
   padding-top: 15px;
}

如何在不同的div上悬停时影响其他div属性？

3 个答案: