CSS:hover选择器怎么用-创新互联

这篇文章主要介绍了CSS: hover选择器怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比唐河网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式唐河网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖唐河地区。费用合理售后完善,10年实体公司更值得信赖。

定义和用法

定义:

: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选择器怎么用

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS: hover选择器怎么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!


本文名称:CSS:hover选择器怎么用-创新互联
本文URL:http://myzitong.com/article/psisp.html

其他资讯