资讯专栏INFORMATION COLUMN

CSS笔记 :hover改变另一个元素样式

Xufc / 1404人阅读

摘要:写在前面近日,在做项目的时候遇到一个需求鼠标悬停在元素时,改变元素样式显然,是要用到来写,但应用的场景有点小讲究,分为两种情形。如有帮助,望不吝赐赞一枚,多谢,如有错误还望不吝指出。

写在前面

近日,在做项目的时候遇到一个需求:

鼠标悬停在A元素时,改变B元素样式

显然,是要用到:hover来写,但应用的场景有点小讲究,分为两种情形。

情景1:A元素是B元素的父级
//情景1
A:hover B{ //鼠标经过A元素时,B元素背景会变成黑色 background:#000; }
情景2:A元素与B元素相邻且A紧接着B

如果B元素在A元素之前,是无法使用+选择符的

//情景2
A:hover +B { //鼠标经过A元素时,B元素背景会变成黑色 background:#000; }
CSS选择器表

最后,这是目前的CSS选择器表,对应的版本也有标明。如有帮助,望不吝赐赞一枚,多谢,如有错误还望不吝指出。逃。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112221.html

相关文章

  • 前端小白进阶笔记之多级菜单分享

    摘要:注释部分为下拉菜单隐藏,显示的样式。子元素会继承父元素的样式在写样式是我们会发现子元素会继承父元素的样式,如果想要改变样式,可以给要改变样式的对象一个或者单独设置其属性相对定位绝对定位的用法。 css技术分享之二级、三级下拉菜单的制作: 首先看一下网页中的三级下拉菜单: showImg(https://segmentfault.com/img/remote/14600000113377...

    Wuv1Up 评论0 收藏0
  • 前端小白进阶笔记之多级菜单分享

    摘要:注释部分为下拉菜单隐藏,显示的样式。子元素会继承父元素的样式在写样式是我们会发现子元素会继承父元素的样式,如果想要改变样式,可以给要改变样式的对象一个或者单独设置其属性相对定位绝对定位的用法。 css技术分享之二级、三级下拉菜单的制作: 首先看一下网页中的三级下拉菜单: showImg(https://segmentfault.com/img/remote/14600000113377...

    Mike617 评论0 收藏0
  • 前端学习笔记CSS、JS基础篇)

    摘要:搜索引擎中有一个爬虫模块,在页面中使用诸如等强调式的标签,有利于,说白了就是有利于被搜索到。定位相对定位不影响元素本身特性不使元素脱离文档流。定时器如果是由事件控制的,要先关再开,避免多次触发而混乱。 CSS篇 注意:css注释使用/ /,而不是或者//,否则很容易导致不明错误!!! div padding:内边距。盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用此属性后会改...

    caikeal 评论0 收藏0
  • 前端学习笔记CSS、JS基础篇)

    摘要:搜索引擎中有一个爬虫模块,在页面中使用诸如等强调式的标签,有利于,说白了就是有利于被搜索到。定位相对定位不影响元素本身特性不使元素脱离文档流。定时器如果是由事件控制的,要先关再开,避免多次触发而混乱。 CSS篇 注意:css注释使用/ /,而不是或者//,否则很容易导致不明错误!!! div padding:内边距。盒子内容与盒子边框的距离设置,相当于给盒子加了厚度,使用此属性后会改...

    xietao3 评论0 收藏0
  • sass笔记-3|Sass基础语法之样式复用和保持简洁

    摘要:区别在于,类是在中运用的,混合器是在样式表中使用的。基本用法选择器继承,用去继承一个选择器定义的所有样式。继承背后的基本实现思路背后最基本的想法是,如果继承了,那么样式表中的任何一处选择器都会用这一选择器组进行替换和打开。 上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式...

    SmallBoyO 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<