知识点一(悬停在文字上)
<p>小爱</p>
p{
font-size: 20px;
color: #333;
}
/*鼠标悬停在p上时字体变大,颜色变为粉色;*/
p:hover{
font-size: 24px;
color: pink;
}
运行结果如下:
知识点二(悬停在盒子上时出现阴影)
(1)外阴影
<div class="box"></div>
.box{
width: 200px;
height: 200px;
background-color: plum;
transition: all .3s;/* 添加过渡,使得阴影缓慢出现*/
}
/*鼠标悬停时出现阴影*/
.box:hover{
box-shadow: 0 10px 15px rgba(0,0,0,.45);
}
运行结果如下:
(2)内阴影
只需在代码中加入inset。
.box:hover{
box-shadow: 0 10px 15px rgba(0,0,0,.45) inset;
}
运行结果:
知识点三 (悬停在li上出现盒子)
<ul class="ul">
<li>小说推荐
<ul>
<li>偷偷藏不住</li>
<li>重生之拯救大佬计划</li>
<li>老婆粉了解一下</li>
<li>我就是这般女子</li>
<li>妃嫔这职业</li>
</ul>
</li>
</ul>
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
.ul>li{
width: 150px;
height: 30px;
background-color: pink;
text-align: center;
line-height: 30px;
position: relative;
}
.ul ul{
position: absolute; /*通过定位将ul放在.ul>li的下面。*/
top: 30px;
left: 0px;
display: none;/*块级元素隐藏*/
}
.ul ul>li{
width: 150px;
height: 30px;
background-color: rgba(0,0,0,.5);
}
.ul>li:hover ul{/*鼠标悬停在.ul中的li上时转换为块级元素*/
display: block;
}
提醒:如果使用display,则过渡(例:transition:all .3s)不生效。
运行结果:
知识点四(通过使用定位来实现鼠标悬停效果)
<div class="cql">
<img src="4(2).jpg" alt="" class="cql-1">
<img src="4(1).jpg" alt="" class="cql-2">
</div>
.cql{
width: 300px;
height: 363px;
position: relative;
margin:100px auto;
}
.cql>img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
.cql:hover .cql-2{
left:200px;
}
.cql:hover .cql-1{
left:-100px;
}
运行结果:
当鼠标悬停时两张图片分别向左向右移动: