关于hover伪类选择器浅谈

伪类选择器的语法和目标

我们在网页制作的过程中很多地方会遇到鼠标触碰的动画效果，那这就需要用到:hover伪类选择器 这里简单说明一下：

定义:hover指在鼠标移到链接上时添加的特殊样式。

• :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。
• 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
• 伪类名称对大小写不敏感。

几个简单的代码块来说明一下

a:link {color: #}		     未访问的链接
a:visited {color: #}	     已访问的链接
a:active {color: #}	         选定的链接 

a:hover {color: #}	         鼠标移动到链接上
.class:hover{}              选择样式为class的变化
.class:hover p{}            选择的是class即鼠标触碰，变化的是p
a:hover +.b{}               选择相邻的兄弟元素

几种常用的hover效果

<div class="demo1">
	鼠标触碰整个div本身发生变化
</div>

.demo1{
	width: 200px;
	height: 100px;
	background-color: palevioletred;
	text-align: center;}
.demo1:hover{
	background-color: peachpuff;
	color: blueviolet;}

那这就是实现最简单触碰整个div使其背景颜色和文字颜色发生改变的伪类效果
这里如果把文字用其他标签框起来则可以实现触碰位置来改变伪类效果

<div class="frame">
			<div class="demo2">
				保持原有使用新的进行覆盖
			</div>
			<div class="demo2-1">
				新的部分
			</div>
		</div>

.demo2{
	width: 200px;
	height: 100px;
	background-color: darkgray;
	color: red;
	position: absolute;
	top: 0px;
	left: 0px;
}
.demo2-1{
	display:none;
	width: 200px;
	height: 100px;
	background-color: white;
	color: blueviolet;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity:0.9; /*这里为了便于观察加入一个透明度*/
}
.frame:hover .demo2-1{
	display: block;
}

这里我们通过定位将新的内容置于原有内容上方并设置为display:none 而伪类选择器则触碰调用显示新内容 效果如图

`

<div class="demo3">鼠标触碰我会移动</div>

.demo3 {
    width: 300px;
    background-color: goldenrod;
    transform: translateX(0);
}
.demo3:hover {
    transform: translateX(-20px);
    transition: transform 0.5s linear 0s;
}

这里transform中的translateX表示标记一个原点位置 通过hover选择我们的demo3 表示向左偏移20px，transform表示完成这个效果需要0.5s 另外在transform的属性中还可以通过scale属性来展示放大或者缩小动画

<div class="wrapper">
	<div class="img">背景参考</div>
	<div class="title">鼠标触碰，我会上移并居中</div>
</div>

.wrapper {
    width: 300px;
}
.img {
    height: 120px;
    background-color: gainsboro;
}
.title {
    margin-top: -30px;
    height: 30px;
    line-height: 30px;
    background-color: red;
}
wrapper:hover .title {
    margin-top: -120px;
    text-align: center;
    height: 138px;
    line-height: 138px;
    background-color: red;
    transition: 0.5s;
}

这里我们可以看到当鼠标触碰下面的红色部分会上移覆盖这和我们刚才的非常相似但是因为我们加入了margin-top属性则会看到一个慢慢从下往上移动的画面，同理我设置其他边款距离就可以获得不同的效果了

谢谢大家的支持 ， 有错请指正