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>

我希望当某人hovers超过privacycheck1时，我希望他们看到一个箭头连接到指向privacycheck1圈子的方框。无论如何要在课堂上上课吗？

Answer 1

您可以使用额外的span元素来创建此内容。

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

.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

你不需要额外的跨度。您可以使用：之后就像使用a：之前一样。

.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;
 }

如果使用top：50％;并且在箭头高度的一半处，它将始终在垂直中心完美对齐。在这种情况下，我给了箭头高度：30px;所以margin-top是-15px

哦，你在徘徊中犯了一个错误：之前。＆＃39; font-weight：100px;＆＃39;不存在，您可以使用＆＃39; bold＆＃39;，＆＃39; 700＆＃39;或其他价值。

另一个提示，请将此添加到您的悬停：之前

left: calc(100% + 15px);

这样你的盒子总是在“点”之间保持正确的距离。和文本框。该框将使用父级的宽度（具有位置的元素：relative;）+ 15px（箭头的宽度）从左侧对齐。

如何在pseudo：hover :: before元素旁边创建一个箭头

2 个答案: