纯CSS选择器控制子元素或兄弟元素的hover效果

hoover.png 纯CSS选择器控制子元素或兄弟元素的hover效果 HTML笔记

一般 hover 效果只用在自身元素和控制子元素,那么可以直接用 CSS 控制兄弟元素的 hover 效果吗?

答案是可以的,不过只能控制相邻的元素,具体示例代码如下:

1、如果 #b 元素是 #a 元素的子元素,可以直接通过 #a:hover #b {...} 这种方式来控制。

示例代码如下:

<style>
    #a:hover #b{
        color:green;
    }
</style>

2、#b#c 是亲兄弟关系,有相同的父节点,且 #b#c 相邻,可以通过 #b:hover + #c{...} 来控制 #c 的样式。

当鼠标移到 #b 时,#c 的样式就会改变。

示例代码如下:

<style>
    #b:hover + #c{color : red;}
</style>

HTML元素:

<div id='a'>元素1
    <div id='b'>元素2</div>
    <div id='c'>元素3</div>
</div>



未经允许不得转载:前端资源网 - w3h5 » 纯CSS选择器控制子元素或兄弟元素的hover效果

赞 (6)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)