当鼠标悬停在另一个元素上时，CSS 会影响一个元素的不透明度吗？

将鼠标悬停在不同元素上时元素会相互影响吗？

问题：

目标是通过将鼠标悬停在另一个元素 (img) 上来修改一个元素 (#thisElement) 的不透明度，而无需利用 JavaScript。

所需功能：

将鼠标悬停在“img”上时，“img”的不透明度应增加到 100%，而“#thisElement”的不透明度应增加' 应减少至 30%。

CSS限制：

不幸的是，CSS 本身无法实现这种效果，因为它缺乏根据不同元素的悬停来将样式应用于元素的能力。

选项影响相邻元素：

但是，CSS 可以改变与相邻元素相关的元素的样式悬停元素：

• 后代： 将样式应用于子元素或嵌套元素。示例：

  #parent_element:hover #child_element {
    opacity: 0.3;
  }

• 相邻同级： 影响紧邻悬停元素之后或之前的元素。示例：

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

建议的解决方案：

基于给定的 HTML 结构，其中 'img' 具有紧邻其下方的兄弟姐妹，无需嵌套，您可以利用相邻的同级选择器：

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

此 CSS 规则将调整与悬停的“img”元素相邻的“img”元素的不透明度。

以上是当鼠标悬停在另一个元素上时，CSS 会影响一个元素的不透明度吗？的详细内容。更多信息请关注PHP中文网其他相关文章！