Can CSS Hover Effects Affect Non-Targeted Elements?

Can CSS Hover Effects Extend to Different Elements?

In CSS, it's not directly possible to apply hover effects on an element that's adjacent or nested within another element. This means that the effect remains confined to the element it's applied to, and you cannot use it to influence other elements.

Descendant and Adjacent Sibling Effects

However, there are two exceptions to this rule when using the adjacent sibling selector ( ) or the descendant selector (>):

• Adjacent Siblings: If two elements are adjacent siblings (appear directly after each other within the HTML code), you can apply an effect to one element based on the hover state of the other using the adjacent sibling selector. For example:

#first-sibling:hover + #second-sibling {
  opacity: 0.3;
}

• Descendants: Similarly, if one element is a descendant of another (nested inside), you can apply an effect to the descendant based on the hover state of the parent using the descendant selector. For example:

#parent-element:hover #child-element {
  opacity: 0.3;
}

Resolving Your Problem

In your specific example, you want to change the opacity of an element called #thisElement when the user hovers over an image with a class of "img." However, you cannot directly target #thisElement using CSS hover effects on "img." Instead, you can consider:

1. Using Adjacent Siblings: If #thisElement is the next adjacent sibling of the image after it in the HTML, you can use:

.img:hover + #thisElement {
  opacity: 0.3;
}

2. Using Descendants: If #thisElement is nested within the image's container, you can use:

.img-container:hover #thisElement {
  opacity: 0.3;
}

The above is the detailed content of Can CSS Hover Effects Affect Non-Targeted Elements?. For more information, please follow other related articles on the PHP Chinese website!