CSS 能否在将鼠标悬停在不同元素上时更改元素的属性？

影响另一个元素悬停在另一个元素上

当单独的元素悬停在其上时是否可以更改元素的属性？此查询深入研究了仅使用 CSS 来实现此行为的方法。

虽然 CSS 的固有功能阻止定位非后代或相邻兄弟姐妹，但在某些特定情况下这是可能的。

后代

如果受影响的元素是悬停元素的后代，CSS 选择器可以有效地定位它使用：

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

例如，这会在悬停时定位“parent_element”内的“child_element”：

<div>

相邻兄弟姐妹

针对相邻兄弟姐妹需要略有不同方法：

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

当“first_sibling”悬停在：

<div>

您案例中的实现

考虑您的样本，您可能会追求类似的目标到：

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

当第一个图像悬停在上面时，这会影响第二个图像。

演示

访问 [this JS Fiddle demo] （在此处插入演示链接）查看交互式示例。

以上是CSS 能否在将鼠标悬停在不同元素上时更改元素的属性？的详细内容。更多信息请关注PHP中文网其他相关文章！