Can Hover Effects on One Element Cascade to Another Using CSS?

Can Effects on One Element Influence Another Element?

The given code aims to enhance an image's opacity while simultaneously decreasing the opacity of another element when the cursor hovers over the image. While such an effect may seem simple, CSS alone cannot execute it.

To establish the desired effect, the two affected elements must be either descendants or adjacent siblings in the code.

Effect on Descendant

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

This affects elements structured as:

<div>

Effect on Adjacent Sibling

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

This works for HTML structure:

<div>

In both instances, the second element in the selector is affected.

For the specific need noted in the query, an expression like this might work:

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

[JS Fiddle Demo](https://jsfiddle.net/)

The above is the detailed content of Can Hover Effects on One Element Cascade to Another Using CSS?. For more information, please follow other related articles on the PHP Chinese website!