html中divhover的⽤法,CSS：hover选择器的使⽤详解
有些时候需要⽤到mouseover和mouseout这两个⿏标事件，但是写js⼜⽐较⿇烦，还要添加监听事件，所以能⽤css解决的东西尽量yongcss解决，这样可以提⾼性能，下⾯说⼀下我对:hover 的了解:
之前在学计算机应⽤的时候，⽼师教我们使⽤了:hover选择器来完成下拉菜单，之前只知道怎么使⽤，并不知道为什么要这么⽤，现在记下怎么使⽤吧
定义和⽤法
定义：
:hover 选择器⽤于选择⿏标指针浮动在上⾯的元素。
:hover 选择器适⽤于所有元素
⽤法1：
这个表⽰的是：当⿏标悬浮在a这个样式上的时候，a的背景颜⾊设置为黄⾊
a:hover
{
background-color:yellow;
}
这个是最普通的⽤法了，只是通过a改变了style
⽤法2:
使⽤a 控制其他块的样式：
使⽤a控制a的⼦元素 b：
.a:hover .b {
background-color:blue;
}
使⽤a控制a的兄弟元素 c(同级元素)：
.
a:hover + .c {
color:red;
}
使⽤a控制a的就近元素d：
.a:hover ~ .d {
color:pink;
}
总结⼀下：
1. 中间什么都不加  控制⼦元素；
2. ‘+’ 控制同级元素(兄弟元素)；
3. ‘～’ 控制就近元素；
实例
⽤⼀个按钮控制⼀个盒⼦的运动状态，当⿏标移到按钮上⽅时，盒⼦停⽌运动，⿏标移开时，盒⼦继续运动body代码：
stop
css样式：
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
实现效果：
css鼠标点击样式以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。