前端CSS样式中高亮显示hover和清除浮动float内容补充

weixin_41987434

已于 2022-06-18 23:25:06 修改

阅读量728

点赞数

分类专栏：前端文章标签： css 前端 css3

于 2022-06-18 23:22:05 首次发布

本文链接：https://blog.csdn.net/weixin_41987434/article/details/125353055

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

opacity: 0.7; 透明度 0.7
CSS中hover内容补充

    <style>
        .dowload{
            display: none;   #不显示内容，隐藏内容
        }
        .app:hover .dowload{   #鼠标放在上面会显示dowload下内容
            display: block;  #显示内容
        }
        .app:hover .title{  #鼠标放在title中的内容上会高亮显示红色
            color: red;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="title">下载app</div>
    <div class="dowload"><img src="download.png" alt="">
    </div>
</div>

CSS样式中边框，可以配合hover来弄，会动一下

border:1px solid red;  			#红色的1像素实线边框
border-left:3px solid blue;		#蓝色的3像素实线左边框
border-left:3px solid transparent;	#透明色的3像素实线左边框

.a1:hover{
	border-left:3px solid blue;
}

CSS中清除浮动float内容，after补充：（after作用：清除浮动，案例如下）

    <style>
        .c1:after{
            content:"111";   #会在加了选择器的内容中补充添加 
        }
    </style>
</head>
<body>
    <div class="c1">测试开发</div>

运行结果为：测试开发111
（after作用：清除浮动，案例如下）

        .clearfix:after{   #父类加了after，里面的样式是清除浮动
            content:""; 
            display: block;  
            clear: both;   
        }
        .item{
            float: left;   #在子类加了浮动
        }
    </style>
</head>
<body>
    <div class="clearfix">  
        <div class="item">1</div>
        <div class="item">1</div>
        <div class="item">1</div>
    </div>

hover和after都可以称：伪类