Question

我有一个按钮，可以在悬停时切换隐藏的下拉列表。框和下拉列表之间没有距离，这就是问题所在。

我想通过在droplist对象上附加边距来在这两者中添加一些空间，但结果是，当我将光标悬停在该空间上时，悬停功能会在到达下拉列表区域之前触发回来。 / p>

这是我的代码......

/* THE DROPLIST BUTTON */

.droplist {
  position: relative;
  display: inline-block;
  user-select: none;
  float: right;
}

.droplist button {
  width: 150px;
  border: none;
  background-color: #585858;
  transition-duration: 0.3s;
  padding: 20px;
  color: white;
  font-family: "Arial";
}

.dropcontent {
  display: none;
  position: absolute;
  background-color: #393939;
}

.dropcontent a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 15px;
  font-family: "Arial";
  transition-duration: 0.1s;
  min-width: 200px;
}

.droplist:hover button {
  background-color: #333333;
  transition-duration: 0.5s;
}

.droplist:hover .dropcontent {
  display: block;
}

.dropcontent a:hover {
  color: #C0C0C0;
  transition-duration: 0.1s;
}


/* THE DROPLIST BUTTON */

<div class="droplist" style="margin: 10px; outline: none">
  <button>GAMES</button>
  <div class="dropcontent">
    <a href="#">STICK FIGHT: THE GAME</a>
    <a href="#">CLUSTERTRUCK</a>
    <a href="#">SQUARE BRAWL</a>
    <a href="#">NUCLEAR BUSINESS</a>
  </div>
</div>

Answer 1

为按钮添加边距。

<强>为什么吗

因为下拉列表设置为绝对位置;因此，它不会影响其父高（.droplist），并且会在之外。没有任何边距，它接近其父母的底部边缘，但如果你添加边距，你会做得很远，并在.droplist之外创建差距，你将面对悬停问题（向容器添加边框以查看它）。

＆＃13;

/* THE DROPLIST BUTTON */

.droplist {
  position: relative;
  display: inline-block;
  user-select: none;
  float: right;
}

.droplist button {
  width: 150px;
  border: none;
  background-color: #585858;
  transition-duration: 0.3s;
  padding: 20px;
  color: white;
  font-family: "Arial";
  margin-bottom:10px;
}

.dropcontent {
  display: none;
  position: absolute;
  background-color: #393939;
}

.dropcontent a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 15px;
  font-family: "Arial";
  transition-duration: 0.1s;
  min-width: 200px;
}

.droplist:hover button {
  background-color: #333333;
  transition-duration: 0.5s;
}

.droplist:hover .dropcontent {
  display: block;
}

.dropcontent a:hover {
  color: #C0C0C0;
  transition-duration: 0.1s;
}


/* THE DROPLIST BUTTON */

＆＃13;

<div class="droplist" style="margin: 10px; outline: none">
  <button>GAMES</button>
  <div class="dropcontent">
    <a href="#">STICK FIGHT: THE GAME</a>
    <a href="#">CLUSTERTRUCK</a>
    <a href="#">SQUARE BRAWL</a>
    <a href="#">NUCLEAR BUSINESS</a>
  </div>
</div>

＆＃13;

Answer 2

在悬停时添加droplist-hover以向此div提供padding-bottom:10px。当你将鼠标悬停在它上面时，它会将droplist div 10个像素扩展到底部，这样当你将鼠标从底部移到外面时，dropcontent将不会关闭，并且在鼠标内部按钮之前也不会打开。然后，您可以添加margin-top:10px .droplist:hover .dropcontent分开他们。检查代码段。

.droplist {
  position: relative;
  display: inline-block;
  user-select: none;
  float: right;
}

.droplist button {
  width: 150px;
  border: none;
  background-color: #585858;
  transition-duration: 0.3s;
  padding: 20px;
  color: white;
  font-family: "Arial";
}

.dropcontent {
  display: none;
  position: absolute;
  background-color: #393939;
}

.dropcontent a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 15px;
  font-family: "Arial";
  transition-duration: 0.1s;
  min-width: 200px;
}

/*Add this block*/
.droplist:hover{
  padding-bottom:10px;
}

.droplist:hover button {
  background-color: #333333;
  transition-duration: 0.5s;
}

/*Give 10px to margin-top here*/
.droplist:hover .dropcontent {
  margin-top:10px;
  display: block;
}

.dropcontent a:hover {
  color: #C0C0C0;
  transition-duration: 0.1s;
}

<div class="droplist" style="margin: 10px; outline: none">
  <button>GAMES</button>
  <div class="dropcontent">
    <a href="#">STICK FIGHT: THE GAME</a>
    <a href="#">CLUSTERTRUCK</a>
    <a href="#">SQUARE BRAWL</a>
    <a href="#">NUCLEAR BUSINESS</a>
  </div>
</div>

添加下拉列表及其按钮之间的距离

2 个答案: