我可以用：hover伪类吗？

Question

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

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

但那让我无处可去。思考？我知道我可能会使用javascript来实现这一点（让元素显示和消失）但我希望找到一个纯粹的css解决方案。

Answer 1

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

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");
    }
);

修改

如果hovered元素位于要修改的元素之前，您也可以为CSS中的兄弟元素执行此操作。像这样：

#navButton + div.text {
    display:none;
}

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

OR

#navButton ~ div.text {
    display:none;
}

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

Answer 2

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

jsFiddle