html中hover的作用,hover在css中的作用是什么

hover在css中的作用是什么

发布时间：2020-12-07 10:26:29

来源：亿速云

阅读：143

作者：小新

这篇文章给大家分享的是有关hover在css中的作用是什么的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。在css中，“:hover”选择器用于选择鼠标指针浮动在上面的元素，然后为其设置样式，语法格式“元素:hover{css样式};”；“:hover”必须位于“:link”和“:visited”之后(如果存在的话)，这样样式才能生效。

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后(如果存在的话)，这样样式才能生效。

:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

css :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;

}

感谢各位的阅读！关于hover在css中的作用是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！