关于hover伪类选择器浅谈

关于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使其背景颜色和文字颜色发生改变的伪类效果
这里如果把文字用其他标签框起来则可以实现触碰位置来改变伪类效果