我可以这样做：hover伪类？ [英] Can I do this with the :hover pseudo class?

问题描述

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

I'm familiar with the :hover psuedo class and using it for elements as well as the typical link setup we're all used to. What I am trying to do however is create a situation where hover over one element would change properties of another. For instance if I were to hover over .block1, #block2 would become visible. I would think the .css would look like something this...

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

但这让我无处可去。想法？我知道我可以使用javascript来使这个发生（使元素出现和消失），但我想找到一个纯CSS解决方案。

but that's getting me nowhere. Thoughts? I know that I could probably use javascript to make this happen (make elements appear and disappear) but I would love to find a pure css solution to this.

推荐答案

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

The element you want to change has to be a child element of the one you are hovering over.

strong>

Example CSS:

#navButton div.text {
    display:none;
}

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

这将使文本div显示如果你将鼠标悬停在id = navButton。

This will make the text div display if you hover over the element with id="navButton".

否则，使用JQuery解决方案：

Otherwise, use a JQuery solution:

CSS：

#navButton div.text {
    display:none;
}

.hover {
    display:block;
}

Javascript： b

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

编辑：

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

You can also do this for sibling elements in CSS if the hovered element precedes the element you want to modify. Like so:

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

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

或

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

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

这篇关于我可以这样做：hover伪类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！