javascript - 如何隐藏一个 div 并在悬停图像或文本上隐藏另一个？

Question

你好，假设下面是代码

<h1>Hover Me</h1>
<div id="showme">Show</div>
<div id="hideme"><Hide</div>

如果我将鼠标悬停在文本上，则应显示 ID 为 showme 的 div，而应隐藏 hide me。请在 jscript 或 css 中为我提供解决方案。谢谢

Answer 1

在 h1 的 :hover 上，div 将可见，而其他 div 将隐藏

h1:hover ~ #showme,
#hideme {
  display: block
}
h1:hover ~ #hideme,
#showme {
  display: none
}

<h1>Hover Me</h1>
<div id="showme">Show</div>
<div id="hideme">Hide</div>