:hover选择器用于选择鼠标指针浮动在上面的元素。当鼠标悬停在元素上时,可使用此选择器设置元素的样式;它可用于每个元素。
image
语法:
element :hover{
CSS样式;
}
与hover相关的伪类:
● :hover 选择器可用于所有元素,不仅是链接。
● :link 选择器设置了未访问过的页面链接样式,
● :visited 选择器设置访问过的页面链接的样式
● :active选择器设置当你点击链接时的样式
说明:为了产生预期的效果,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
示例1:在悬停在元素上时更改背景颜色。
h1:hover {
color: white;
background-color: plum;
}
悬停文本
效果图:
1.gif
示例2:在文本上悬停时显示隐藏的块
div {
background: plum;
width: 250px;
height: 50px;
padding: 20px;
font-size: 30px;
color: white;
display: none;
margin: auto;
text-align: center;
}
h1:hover + div {
display: block;
}
悬停文本
一段测试文本!
效果图:
2.gif