CSS On Hover - 将元素 ID1 更改为 ID2

Question

我试图弄清楚如何在悬停时将元素 #1 交换为 #2。

所以我需要实现的是，当我将鼠标悬停在 #1 上时，它将变为 #2。

有可能吗？ Wordpress 中的 CSS 或 jquery？

除了几个小时的谷歌搜索，我还没有真正尝试过任何东西，我真的不知道从哪里开始。

Answer 1

诀窍是添加一个容器元素

.container #two {
  display: none;
}

.container:hover #two {
  display: block;
}

.container:hover #one {
  display: none;
}

<div class="container">
  <div id="one">One</div>
  <div id="two">Two</div>
</div>