电话
13363039260
详解CSS:hover伪类选择器的使用方法
2024-01-18 10:50 小编
细心的小伙伴会发现，几乎每个网站都会用到hover，hover一般被应用在按钮、logo以及图片等元素上面,但有些时候也会用到mouseover和mouseout这两个鼠标事件，但是JavaScript比较麻烦，建议能用CSS解决的尽量用CSS吧，这样可以提高性能。接下来就详细讲讲hover的使用方法。
一、定义和用法
定义：hover在鼠标移到链接上时可以添加特殊样式。
用法：选择器：hover{属性：属性值}
比如：
a:hover{background-color:yellow;}
.aa:hover{color:#FFF;background:#0C0;}
与hover相关的伪类:
:hover选择器可用于所有元素，不仅是链接。
:link选择器设置了未访问过的页面链接样式,
:visited选择器设置访问过的页面链接的样式
:active选择器设置当你点击链接时的样式
注意：为了产生预期的效果，:hover必须位于:link和:visited之后。
二、CSS:hover方法实例
实例描述：当鼠标进过div时，这个div逐渐变大，当鼠标移出时，div又逐渐变小，回到最初的样式。这个就是使用的CSShover事件实现的。
HTML部分：
<divclass="aa"></div>
CSS部分：
.aa{
width:100px;
height:100px;
background-color:blue;
-webkit-transition:transform2slinear;
-moz-transition:transform2slinear;
-ms-transition:transform2slinear;
-o-transition:transform2slinear;
transition:transform2slinear;
}
.aa:hover{
-webkit-transform:scale(2);
-moz-transform:scale(2);
-ms-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
}
猜你喜欢
联络方式：
13363039260
微信二维码 