Home >Web Front-end >CSS Tutorial >Can CSS Hover Effects Affect Non-Targeted 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.
However, there are two exceptions to this rule when using the adjacent sibling selector ( ) or the descendant selector (>):
#first-sibling:hover + #second-sibling { opacity: 0.3; }
#parent-element:hover #child-element { opacity: 0.3; }
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:
.img:hover + #thisElement { opacity: 0.3; }
.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!