详解CSS:hover伪类选择器的使用方法
导读： 细心的小伙伴会发现，几乎每个网站都会用到hover，hover一般被应用在按钮、logo以及图片等元素上面,但有些时候也会用到mouseover和mouseout这两个鼠标事件，但是JavaScript比较麻烦，建议能用CSS解决的尽量...
细心的小伙伴会发现，几乎每个网站都会用到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部分：
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);
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 详解CSS:hover伪类选择器的使用方法
本文地址： https://pptw.com/jishu/664943.html