您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

有什么方法可以将鼠标悬停在一个元素上并影响另一个元素?[重复]

有什么方法可以将鼠标悬停在一个元素上并影响另一个元素?[重复]

使用CSS的唯一方法是,要影响的元素是后代还是相邻的同级元素。

对于后代:

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

这将适用于以下元素:

<div id="parent_element">
    <div id="child_element">Content</div>
</div>

对于相邻的兄弟姐妹:

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

哪个适用于标记,例如:

<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and Now in the second</div>

在这两种情况下,选择器中的后一个元素都是所选元素。

给定您的伪代码示例,您可能想要类似以下内容

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

JS小提琴演示

其他 2022/1/1 18:19:39 有480人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶