hover在css中的作用是什么-创新互联
这篇文章给大家分享的是有关hover在css中的作用是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
乌拉特前网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。成都创新互联从2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。在css中,“:hover”选择器用于选择鼠标指针浮动在上面的元素,然后为其设置样式,语法格式“元素:hover{css样式};”;“:hover”必须位于“:link”和“:visited”之后(如果存在的话),这样样式才能生效。
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示::hover 选择器可用于所有元素,不只是链接。
在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
:link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。
css :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样式:
感谢各位的阅读!关于hover在css中的作用是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
标题名称:hover在css中的作用是什么-创新互联
本文路径:http://azwzsj.com/article/deedgd.html