CSS中hover有哪些常见用法

avatar
作者
猴君
阅读量:0

在CSS中,hover伪类选择器用于为鼠标悬停在元素上时的元素应用样式。以下是一些常见的hover用法:

  1. 改变颜色:
a:hover {   color: red; } 

当鼠标悬停在链接上时,链接的颜色会变为红色。

  1. 改变背景颜色:
button:hover {   background-color: blue; } 

当鼠标悬停在按钮上时,按钮的背景颜色会变为蓝色。

  1. 显示隐藏元素:
div:hover #hidden-element {   display: block; } 

当鼠标悬停在div元素上时,会显示ID为hidden-element的元素。

  1. 改变尺寸:
div:hover {   width: 200px;   height: 200px; } 

当鼠标悬停在div元素上时,div的尺寸会变为200px x 200px。

  1. 添加过渡效果:
a:hover {   color: red;   transition: color 0.3s ease; } 

当鼠标悬停在链接上时,链接的颜色会在0.3秒内平滑地过渡到红色。

  1. 鼠标移出时恢复原状:
a:hover, a:hover:after {   color: blue; } a:hover:after {   content: " (hover me)"; } a:not(:hover):after {   content: ""; } 

当鼠标悬停在链接上时,链接的文字颜色会变为蓝色,并显示" (hover me)“。当鼠标移出链接时,文字颜色恢复为原色,同时” (hover me)"也会消失。

这些只是hover的一些基本用法,实际上hover可以与其他CSS属性和选择器结合使用,实现更丰富的交互效果。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!