语法:
element :hover{ CSS样式; }
与hover相关的伪类:
● :hover 选择器可用于所有元素,不仅是链接。
● :link 选择器设置了未访问过的页面链接样式,
● :visited 选择器设置访问过的页面链接的样式
● :active选择器设置当你点击链接时的样式
说明:为了产生预期的效果,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
示例1:在悬停在元素上时更改背景颜色。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <style> h1:hover { color: white; background-color: plum; } </style> </head> <body> <h1 align="center"> 悬停文本 </h1> </body> </html>
效果图:
示例2:在文本上悬停时显示隐藏的块
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <style> 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; } </style> </head> <body> <br /> <h1 align="center"> 悬停文本 </h1> <div> 一段测试文本! </div> </body> </html>
效果图:
以上就是CSS:hover伪类选择器怎么用?的详细内容,更多请关注易知道|edz.cc其它相关文章!