CSS 悬停效果会影响非目标元素吗？

CSS 悬停效果可以扩展到不同的元素吗？

在 CSS 中，无法直接将悬停效果应用于相邻或嵌套在另一个元素中的元素。这意味着该效果仍然仅限于其所应用的元素，并且您不能使用它来影响其他元素。

后代和相邻同级效果

但是，此规则有两个例外当使用相邻同级选择器 ( ) 或后代选择器时(>):

• 相邻同级元素： 如果两个元素是相邻同级元素（在 HTML 代码中直接出现在彼此之后），则可以基于一个元素对一个元素应用效果使用相邻同级选择器在另一个的悬停状态上。例如：

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

• 后代： 同样，如果一个元素是另一个元素的后代（嵌套在内部），您可以将效果应用于基于后代的使用后代选择器在父级的悬停状态上。例如：

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

解决您的问题

在您的特定示例中，当用户将鼠标悬停在带有 a 的图像上时，您想要更改名为 #thisElement 的元素的不透明度“img”类。但是，您无法在“img”上使用 CSS 悬停效果直接定位 #thisElement。相反，您可以考虑：

1. 使用相邻兄弟： 如果 #thisElement 是 HTML 中图像的下一个相邻兄弟，您可以使用：

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

2. 使用后代：如果 #thisElement 嵌套在图像的容器内，您可以使用：

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

以上是CSS 悬停效果会影响非目标元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！