纯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>



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

推荐阅读:

jQuery.dotdotdot多行文本省略号插件的使用方法

联通沃云服务器拒绝连接请求如何开放端口

Linux下如何重置MySQL密码

ColorZilla Chrome浏览器网页取色插件(不定时更新)

js 获取input的value值及验证手机号和汉字的正则表达式

赞 (6)
分享到: +

评论 沙发

Avatar

换个身份

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