Can CSS Change an Element's Properties on Hovering Over a Different Element?

Impacting a Distinct Element on the Hover of Another

Is it possible to alter an element's properties when a separate element is hovered over? This query delves into ways to achieve this behavior using only CSS.

While CSS's inherent capabilities prevent targeting non-descendants or adjacent siblings, there are specific scenarios where it's possible.

Descendants

If the affected element is a descendant of the hovered element, the CSS selector can effectively target it using:

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

For example, this targets the "child_element" within the "parent_element" on hover:

<div>

Adjacent Siblings

Targeting adjacent siblings requires a slightly different approach:

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

This affects "second_sibling" when "first_sibling" is hovered over:

<div>

Implementation in Your Case

Considering your sample, you likely aim for something similar to:

img:hover + img {
    opacity: 0.3;
    color: red;
}

This affects the second image when the first image is hovered over.

Demo

Visit [this JS Fiddle demo](insert demo link here) for an interactive example.

The above is the detailed content of Can CSS Change an Element's Properties on Hovering Over a Different Element?. For more information, please follow other related articles on the PHP Chinese website!