0

Is it possible to change a div tag's properties when you hover on a different div tag?

For example, 

#tag1 {

/* properties */
}
#tag1 a:hover {
/* new properties */
}


#tag2 {
/* contains a link */
}

where tag1 experiences the change but tag2 contains the location (or link) of where the hover would occur.

jaiesh
  • 136
  • 2
  • 11
  • This is only possible when when the element you wish to change is an adjacent sibling of the element whose hover triggers it. Is this the case? – Purag Dec 26 '11 at 21:59
  • 2
    It depends on the relationship between `#tag1` and `#tag2` in your HTML. For example, if `#tag2` follows after `#tag1`, you can use `#tag1:hover + #tag2` or `#tag1:hover ~ #tag2`. – BoltClock Dec 26 '11 at 22:00
  • You should be able to do that with javascript, something like ` – Aleks G Dec 26 '11 at 22:00
  • I can make the element that changes the parent div tag where tag2 is nested inside tag1.
    – jaiesh Dec 26 '11 at 22:02

1 Answers1

6

Here's an example of what's possible with modifying an element when you hover over a separate one with CSS.

As you can see, it's limited to modifying child elements and immediately succeeding siblings. In the former, you can select any child of the div to modify when you hover over the entire thing. In the latter, so much as a <br> tag between the div and span will break the relationship.

EDIT: I also forgot that you can select any succeeding element that shares the same parent with the one whose hover event is triggered using the ~ selector. Here's an updated fiddle explaining that. In this case, there can be elements between the two that are connected by the hover event whose relationship won't be broken because of it. In the case of the jsfiddle, all the elements share the body element as their parent, so the general sibling selector (~) is able to select them.

Currently, there is no parent selector in CSS. For further explanation, check out this answer (and for an even deeper explanation, this one is good too).

This can be done with Javascript, however, which can even give you the ability to select other elements with no immediate relationship (parents, children, or adjacent siblings).

Community
  • 1
  • 1
Purag
  • 16,273
  • 4
  • 48
  • 70
  • Not *any* element that shares the same parent, but any element *that comes after it* in the same parent, whether immediately or not. – BoltClock Dec 26 '11 at 22:30