javascript - CSS3 (jQUery?) 悬停时隐藏元素 "a"，这样元素 "b"可能会显示

Question

我有两个元素:

.el-a {}

和

.el-b {}

默认情况下，el-b 已经隐藏，而 el-a 正在显示，我需要做的是一旦用户将鼠标悬停在 el- a，el-a会隐藏，el-b会出现。是否可以使用 CSS3 实现，或者只能使用 jQuery 实现？

Answer 1

这是一种方法，如果 el-a 和 el-b 都有一个共同的父级:

.el-a a {
  background-color: yellow;
}
.el-b a {
  background-color: lightblue;
  opacity: 0;
}
.parent a {
  display: block;
  overflow: hidden;
}
.parent:hover .el-a a {
  opacity: 0
}
.parent:hover .el-b a {
  opacity: 1
}

<div class="parent">
  <div class="el-a">
    <a href="#">1</a>
  </div>


  <div class="el-b">
    <a href="#">2</a> 
  </div>
</div>

你没有具体说明你是否想让 el-a 所占领的区域坍塌，所以我没有让它坍塌，但这也是可以做到的。此外，如果 el-a 和 el-b 的维度相同，或者 el-b 出现在 el-a 之前，这会更容易。