显示：块/显示：元素上无：悬停不起作用[重复]

Posted 2023-03-06

【中文标题】显示：块/显示：元素上无：悬停不起作用[重复]

【英文标题】：Display: block / Display: none on element:hover not working [duplicate]

【发布时间】：2021-01-30 09:47:11

【问题描述】：

我想根据鼠标悬停在文档网络其他位置的链接元素上显示和隐藏带有一些文本的 div：

html：

    <ul class="black-white one-on-two" id="hidden-menu">
        <li><a id="showhim" href="#">SHOW HIM?</a></li>
        <li><a href="#">HOW?</a></li>
        <li><a href="#">WHO?</a></li>
    </ul>
    <div class="one-on-two" id="showme"> SHOW ME</div>

CSS：

#showme 
   display: none;


#showhim:hover #showme 
   display: block;

为什么以及如何使其仅适用于 css 和 HTML？

【问题讨论】：

#showme 不是#showhim 在任何级别的后代。

那么在这种情况下没有JS就没有办法吗？

由于当前没有:parent CSS 选择器，考虑到您当前的布局，无法使用 CSS 执行此操作。使用 javascript。

【参考方案1】：

您的 CSS 规则不正确。您在其中调用了错误的 ID。

仅使用 HTML 和 CSS 是不可能的。 HTML 用于标记，CSS 用于样式。

你正在尝试做一些逻辑，这是两者都做不到的。

您需要一些 JavaScript，它会侦听悬停事件并更改其他 div 的显示属性以显示或隐藏。

【讨论】：

当他们一个接一个来的时候是可能的。 （不带js）