css中的hover如何用
发布时间：09/01 来源：未知 浏览：
关键词：
在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>结果图：
总结：以上就是本篇文章的全部内容了，但愿对大家有所帮忙。
以上就是css中的hover如何用的具体内容，更多请关注百分百源码网其它相关文章！
