hover在css中的用法，css中的hover属性
大家好,今天小编来为大家解答以下的问题，关于hover在css中的用法，css中的hover属性这个很多人还不知道，现在让我们一起来看看吧！
css中的hover怎么用
hover用于选择鼠标指针浮动在上面的元素，它有以下几种用法：直接在悬浮元素上改变样式，改变子元素的样式，改变同级元素的样式以及改变就近元素的样式等
在CSS中有个hover属性，当鼠标移上去的时候可以将其激活，它可以用来实现类似于js的一些功能。接下来在文章中将为大家具体介绍hover属性如何使用，希望对大家有所帮助。
【推荐课程：CSS教程】
hover的定义
:hover选择器用于选择鼠标指针浮动在上面的元素，它适用于所有元素
:hover选择器适用于所有元素
hover的用法
用法一：鼠标悬浮在元素上改变元素样式
例：当鼠标悬浮在字体上，字体颜色发生改变
<style>
h1:hover{
color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
</body>效果图：
这个是最普通的用法了，只是改变了style样式
用法2：通过hover控制其他块的样式
这个用法可以有分为以下三种样式
（1）控制子元素的样式
<style>
h1:hover p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网
<p>hover的用法</p>
</h1>效果图：
（2）控制兄弟元素的样式
‘+’控制同级元素（兄弟元素）
<style>
h1:hover+p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>效果图：
（3）控制就近元素的样式
‘～’控制就近元素
<style>
h1:hover~p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>效果图：
hover选择器如何使用
这次给大家带来hover选择器如何使用，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代码：
<body>
<p class="btn stop">stop</p>
<p class="animation"></p>
</body>css样式：
<style>
.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;
}
</style>实现效果：
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
CSS怪异盒模型和标准盒模型如何使用
css3的动画序列animation
CSS :hover伪类选择器
:hover选择器用于选择鼠标指针浮动在上面的元素。当鼠标悬停在元素上时，可使用此选择器设置元素的样式；它可用于每个元素。
语法：
与hover相关的伪类:
●:hover选择器可用于所有元素，不仅是链接。
●:link选择器设置了未访问过的页面链接样式,
●:visited选择器设置访问过的页面链接的样式
●:active选择器设置当你点击链接时的样式
说明：为了产生预期的效果，:hover必须位于:link和:visited之后（如果存在的话），这样样式才能生效。
示例1：在悬停在元素上时更改背景颜色。
效果图：
示例2：在文本上悬停时显示隐藏的块
效果图：
更多HTML的相关知识，可访问： web前端自学！!
文章分享结束，hover在css中的用法和css中的hover属性的答案你都知道了吗？欢迎再次光临本站哦！