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

Posted 2023-05-09

【中文标题】CSS On Hover - 将元素 ID1 更改为 ID2

【英文标题】：CSS On Hover - Change Element ID1 to ID2

【发布时间】：2019-09-19 22:52:10

【问题描述】：

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

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

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

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

【问题讨论】：

这当然是可能的，但不是一个好主意。 id 属性是静态的。如果您出于样式原因尝试这样做，我强烈建议您仅使用 CSS，特别是 :hover 规则。

嘿，Rory，谢谢，你觉得下面 Miquel 的解决方案好用吗？

当然，这是一种解决方案，尽管这不是我读到您的问题的意图；我原以为您想在运行时动态更改单个元素的 id 以更改其样式。

不，我认为这正是我想要的，当我将元素 #1 悬停时，元素 #2 会出现。

在这种情况下，Miquel 的答案正是您所需要的

【参考方案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>