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

问题描述

| 我熟悉：hover psuedo类，并将其用于元素以及我们都已经习惯的典型链接设置。但是，我试图做的是创建一种情况，将鼠标悬停在一个元素上会改变另一个元素的属性。例如，如果我将鼠标悬停在.block1上，则＃block2将变为可见。我认为.css看起来像这样...

.block1:hover div#block2
{
    visibility:visible;
}

但这使我无处可去。有什么想法吗？我知道我可能可以使用javascript来做到这一点（使元素出现和消失），但是我很乐意为此找到一个纯CSS解决方案。     

解决方法

        您要更改的元素必须是您要悬停的元素的子元素。 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;
}

    ,        如果第二个元素是第一个元素的后代，则它将起作用。 jsFiddle。