CODEWITHSUNDEEP
csscss-selectorspseudo-class
loriensleafs
loriensleafs

Reputation: 2255

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.

Upvotes: 4

Views: 6220

Answers (3)

joeschmidt45
joeschmidt45

Reputation: 1962

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

Upvotes: 6

Zack Macomber
Zack Macomber

Reputation: 6905

Visually you can do this using LESS, but under the hood it's actually using JavaScript.

Upvotes: 0

calebds
calebds

Reputation: 26238

This is not possible with CSS alone. You'll have to use a JavaScript event handler. For example, with jQuery's hover:

​$('#3dstack').hover(function() {
    $('#otherID').toggleClass('properties');    
});​​​​​​​

Upvotes: 1

Related Questions