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

因此，我有一个div出现在屏幕顶部，当您将鼠标悬停在屏幕底部时，将显示文本。

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

那可能吗？最好使用CSS / HTML而不是Java或其他东西？

最佳答案

您可以使用~（波浪号）运算符来定位悬停显示的所有兄弟姐妹（所有兄弟姐妹应具有相同的父对象）。请查看下面的示例代码段：

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

<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>

希望这可以帮助！

关于html - 如何将两个悬停效果添加到同一div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40696148/