Can I do this with the :hover pseudo class?

问题

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

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.

回答1:

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

Example CSS:

#navButton div.text {
    display:none;
}

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

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

Otherwise, use a JQuery solution:

CSS:

#navButton div.text {
    display:none;
}

.hover {
    display:block;
}

Javascript:

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

Edit:

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

回答2:

If that second element is a descendent of the first, then it will work.

jsFiddle.

来源：https://stackoverflow.com/questions/6353397/can-i-do-this-with-the-hover-pseudo-class

标签

css

class

hover

css-selectors