大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍“CSS: hover选择器如何用”,在日常操作中,相信很多人在CSS: hover选择器如何用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS: hover选择器如何用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
站在用户的角度思考问题,与客户深入沟通,找到化隆网站设计与化隆网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟空间、企业邮箱。业务覆盖化隆地区。
定义和用法
定义:
:hover 选择器用于选择鼠标指针浮动在上面的元素。
:hover 选择器适用于所有元素
用法1:
这个表示的是:当鼠标悬浮在a这个样式上的时候,a的背景颜色设置为黄色
a:hover { background-color:yellow; }
这个是最普通的用法了,只是通过a改变了style
用法2:
使用a 控制其他块的样式:
使用a控制a的子元素 b:
.a:hover .b { background-color:blue; }
使用a控制a的兄弟元素 c(同级元素):
.a:hover + .c { color:red; }
使用a控制a的就近元素d:
.a:hover ~ .d { color:pink; }
总结一下:
1. 中间什么都不加 控制子元素;
2. ‘+’ 控制同级元素(兄弟元素);
3. ‘~’ 控制就近元素;
实例
用一个按钮控制一个盒子的运动状态,当鼠标移到按钮上方时,盒子停止运动,鼠标移开时,盒子继续运动
body代码:
stop
css样式:
实现效果:
到此,关于“CSS: hover选择器如何用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!