如何在伪:hover：：hover元素旁边制作箭头

Question

这是我的代码

​

.privacycheck1 {
  position: relative;
  top: 265px;
  background-color: #CF0000;
  width: 24px;
  height: 24px;
  left: 843px;
  border-radius: 50px;
  border: 5px #E60000;
}
.privacycheck1::before {
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  left: 30px;
}
.privacycheck1:hover::before {
  content: 'This information is private';
  width: 125px;
  height: 35px;
  background-color: #CF0000;
  left: 40px;
  top: -10px;
  font-family: arial;
  font-size: 15px;
  font-weight: 100px;
  color: white;
  padding: 10px;
}

<div class="privacycheck1"></div>

​

我希望当有人在privacycheck1上使用hovers时，我希望他们看到一个箭头连接到指向privacycheck1圆圈的方框上，有没有在类中创建类的方法？

Answer 1

您可以使用额外的span元素来创建它。

首先使用span创建箭头的尾部，然后在after伪元素上使用border-hack创建箭头头。你可以找到各种各样的箭头

​

.privacycheck1 {
  position: relative;
  top: 30px;
  background-color: #CF0000;
  width: 24px;
  height: 24px;
  left: 30px;
  border-radius: 50px;
  border: 5px #E60000;
}
.privacycheck1::before {
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  left: 30px;
}
.privacycheck1:hover::before {
  content: 'This information is private';
  width: 125px;
  height: 30px;
  background-color: #CF0000;
  left: 40px;
  top: -10px;
  font-family: arial;
  font-size: 15px;
  font-weight: 100px;
  color: white;
  padding: 10px;
}
.arrow {
  position: absolute;
  width: 15px;
  height: 5px;
  background: green;
  left: 20px;
  top: 8px;
  display:none;
}
.arrow:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid green;
  left:15px;
  top:-2px;
  display:none;
  }
.privacycheck1:hover span,.privacycheck1:hover span:after{
  display:block;
  }

<div class="privacycheck1"><span class="arrow"></span>
</div>

​

Answer 2

你不需要额外的跨度。你可以使用:after，就像你之前使用:一样。

.privacycheck1:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  margin-top: -15px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #CF0000;
 }

如果您使用顶部: 50%；和边距-顶部负箭头高度的一半，它将始终在垂直中心完全对齐。在本例中，我给出了箭头高度: 30px；因此，页边距顶部是-15px

哦，你在你的悬停中犯了一个错误:之前。“‘font weight:100px；”不存在，您可以使用“加粗”、“700”或其他值。

另一个提示，将这个添加到你的鼠标悬停中:之前

left: calc(100% + 15px);

这样，您的框将始终在‘点’和文本框之间保持正确的距离。该框将使用父元素的宽度(具有position: relative；的元素)+ 15px (箭头的宽度)从左对齐。