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

Question

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.

joeschmidt45 · Accepted Answer · 2012-03-19 16:37:22Z

6

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

edited Mar 19, 2012 at 16:37

answered Mar 19, 2012 at 16:11

joeschmidt45

1,9622 gold badges17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BoltClock Over a year ago

A child, a descendant, a sibling, or even a child/descendant of a sibling, or... you get the picture.

loriensleafs Over a year ago

so the demo you made works, I'm trying to get this fiddle to work where you roll over and the opacity changes for in this case, a specific layer in the second containing div. jsfiddle.net/7EH7X When I roll over it nothing seems to change, I'm not sure where I'm going wrong here, the div I'm trying to change is a child and I as far as I can tell it's the same set up as what you did. In the end for this I'd like to have all four of the children change on roll over.

joeschmidt45 Over a year ago

It is probably a problem with your inline styles which cannot be overriden by pseudo-classes.

calebds · Accepted Answer · 2012-03-19 16:11:46Z

1

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

DEMO

answered Mar 19, 2012 at 16:11

calebds

26.3k9 gold badges51 silver badges75 bronze badges

1 Comment

loriensleafs Over a year ago

so I tried what you did here jsfiddle.net/7EH7X/1 and I wasn't able to get it to work, can you look at it quickly?

Zack Macomber · Accepted Answer · 2012-03-19 16:16:18Z

0

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

answered Mar 19, 2012 at 16:16

Zack Macomber

6,90316 gold badges61 silver badges108 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related