Question

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.

Answer 1

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).