我可以用 :hover 伪类来做到这一点吗？

Posted 2023-03-06

【中文标题】我可以用 :hover 伪类来做到这一点吗？

【英文标题】：Can I do this with the :hover pseudo class?

【发布时间】：2011-09-15 06:05:33

【问题描述】：

我熟悉 :hover 伪类并将其用于元素以及我们都习惯的典型链接设置。然而，我想要做的是创造一种情况，将鼠标悬停在一个元素上会改变另一个元素的属性。例如，如果我将鼠标悬停在 .block1 上，#block2 就会变得可见。我认为 .css 看起来像这样......

.block1:hover div#block2

    visibility:visible;

但这让我无处可去。想法？我知道我可能会使用 javascript 来实现这一点（让元素出现和消失），但我很想找到一个纯 css 解决方案。

【问题讨论】：

您找到解决方案了吗？如果没有，我仍然愿意提供帮助。

【参考方案1】：

如果第二个元素是第一个元素的后代，那么它将起作用。

jsFiddle.

【参考方案2】：

您要更改的元素必须是您悬停的元素的子元素。

示例 CSS：

#navButton div.text 
    display:none;


#navButton:hover div.text 
    display:block;

如果您将鼠标悬停在 id="navButton" 的元素上，这将使文本 div 显示。

否则，使用 JQuery 解决方案：

CSS：

#navButton div.text 
    display:none;


.hover 
    display:block;

Javascript：

$("#navButton").hover(
    function () 
        $("#navButton div.text").addClass("hover");
    ,
    function () 
        $("#navButton div.text").removeClass("hover");
    
);

编辑：

如果悬停的元素位于要修改的元素之前，您也可以对 CSS 中的同级元素执行此操作。像这样：

#navButton + div.text 
    display:none;


#navButton:hover + div.text 
    display:block;

或

#navButton ~ div.text 
    display:none;


#navButton:hover ~ div.text 
    display:block;