How to Change the Color of Sibling Elements on Hover with CSS?

How to Selectively Change Color of Siblings with CSS Hover

When hovering over an element, there are certain CSS techniques that can be employed to alter the appearance of its neighboring elements.

Targeting Subsequent Siblings

Using a " " sign in your CSS selector allows you to target the element immediately following the element you're hovering over. For instance, the following code changes the color of an "a" element when the preceding "h1" element is hovered:

h1:hover + a { color: #4f4fd0; }

Targeting Previous Siblings

However, CSS has limitations when it comes to targeting previous siblings. To achieve a similar effect, you would need to wrap the elements within a parent container and use the general sibling selector "~" to target the desired element. However, this method may not always produce the desired result.

#banner h1:hover ~ a { color: #4f4fd0; }

Example Scenario

Consider the following HTML markup:

<h1>

To change the color of the "a" element when the "h1" with the id "title" is hovered, you can use the following CSS:

#title:hover + .button { color: #4f4fd0; }

The above is the detailed content of How to Change the Color of Sibling Elements on Hover with CSS?. For more information, please follow other related articles on the PHP Chinese website!