CSS--鼠标悬停总结

知识点一（悬停在文字上）

<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;
        }

运行结果：

当鼠标悬停时两张图片分别向左向右移动：