如何用另一个悬停替换 div（仅限 CSS）

Question

我有两个盒子，一个是隐藏的，一个是可见的。我想让它以一种方式工作，当默认框悬停时，它会淡出并且显示无的框变得可见。

这是代码无法按我想要的方式工作，因为一旦框悬停，它仍然可见，而我想要它去display: none。

.box1, .box2{
  width:100px;
  height 100px;
  border:1px solid black;
  text-align:center;
}

.box1{
  display: block;
}

.box2{
  display: none;
}

.box1:hover ~ .box2{
  display:block;
}

<div class="box1">
  <p>data 1</p>
</div>

<div class="box2">
  <p>data 2</p>
</div>

如果在盒子切换后进行动画处理可能会更好。

有人问过类似的问题，但他们都要求使用 JavaScript。我只喜欢 CSS。

任何的想法？提前致谢。

Answer 1

您可以使用以下 css 向两个 div 添加包装器：

.wrapper {
  width: auto;
  display: inline-block;
  background-color: red; //for visuals
}

而你似乎忘记隐藏 .box1

.wrapper {
  width: auto;
  display: inline-block;
  background-color: red; //for visuals
}

.box1,
.box2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
}

.box1 {
  display: block;
}

.box2 {
  display: none;
}

.wrapper {
  width: auto;
  display: inline-block;
  background-color: red;
}

.wrapper:hover .box1 {
  display: none;
}

.wrapper:hover .box2 {
  display: block;
}