HTML5(H5)hover伪类

hover伪类

        .box{

                width: 200px;

                height: 200px;

                /*background-color: red;*/

                /*边框*/

                border: 2px solid black;

                /*过渡:当样式发生改变的样式

                             值1:  所有的属性

                             值2:  改变所用的时间 单位 s 秒

                */

                transition: all 2s;

        }

hover

        作用:鼠标移入移出的时候触发指定样式

        鼠标移入时;触发hover的样式

        鼠标移出时:回到初始样式。整个hover中的代码,都不会被加载

        后面的hover 是固定的写法

        前面是要添加hover伪类的 目标 (目标尽量不要写成标签选择器)

        指定的目标:最好是单一的

        使用hover伪类时,将 子代(后代)选择器 写在hover之后会表示:

        前面是触发者

        hover之后的是显示者

代码示例:

        .box:hover>p{

                            width: 500px;

                            border-radius: 20%;

                            background-color: yellow;

        }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、html5新特性 1.增加了一个专门用于绘画的元素canvas 2.增加了用于媒体播放的音频和视频元素 3.增...
    空谷悠阅读 617评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,711评论 1 13
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,208评论 0 11
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,634评论 0 6