Question

所以，我的屏幕顶部有一个div，当你将鼠标悬停在屏幕上方时，会出现文字。

我想为div添加另一个效果，使更多文本出现在屏幕上完全不同的位置，而其他文本则保留在同一位置。

这可能吗？最好使用CSS / HTML代替Java还是其他东西？

Answer 1

您可以使用 ~ （代字号）运算符来定位悬停时所有兄弟姐妹（所有兄弟姐妹应该拥有相同的父级）。请查看下面的示例代码段：

＆＃13;

body { margin: 0; }

.holder {
  text-align: center;
  height: 100vh;
}

.hover {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: red;
  font-size: 30px;
  font-weight: bold;
  border: 2px solid red;
  padding: 10px 15px;
  cursor: default;
  transition: all .2s linear;
}

.hover:hover {
  background: rgba(255, 0, 0, 0.1);
}

.hover:hover ~ .show-text {
  opacity: 1;
  transition: all .2s linear;
}

.show-text {
  position: absolute;
  opacity: 0;
  font-size: 20px;
  border-bottom: 1px solid #aaa;
  transition: all .2s linear;
}

.one {
  bottom: 20%;
  left: 20%;
}

.two {
  bottom: 20%;
  right: 20%;
}

＆＃13;

<div class="holder">
  <div class="hover">Hover Me!</div>
  <div class="show-text one">I'm Text 1</div>
  <div class="show-text two">I'm Text 2</div>
</div>

＆＃13;

希望这有帮助！

如何将两个悬停效果添加到同一个div

1 个答案: