悬停CSS-将元素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>