Search code examples
csscss-selectorspseudo-class

css pseudo class, hover on one element changes properties in different element

I was wondering how I could set up css pseudo classes, specifically hover so when I hover over an element, like a div with an id, the properties of a different div with an id get changed?

so normally it would be this:

#3dstack:hover {
  listed properties
}

I'm not sure what the change would be to have it hover on div with the id 3dstack and have it change another div.

Solution

  • I do not think that is possible unless the element you want to change the properties of is a descendent or a sibling of the hovered element, in which case you can do:

    #myElement:hover #myElementDescendent {
    background-color: blue;
}

/*or*/

#myElement:hover + #myElementSibling {
    background-color: blue;
}

    Of course you can always use jquery to do this:

    $("#anelement").hover(
    function() {
        $("otherelement").css("background-color", "blue");
    });

    See the differences here