CODEWITHSUNDEEP
cssclasshovercss-selectors
DWLynch
DWLynch

Reputation: 61

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.

Upvotes: 2

Views: 156

Answers (2)

BCDeWitt
BCDeWitt

Reputation: 4773

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

OR

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

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

Upvotes: 4

alex
alex

Reputation: 490183

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

jsFiddle.

Upvotes: 1

Related Questions