CSS :hover伪类选择定义和用法
2016-10-21 22:08
645 查看
伪类选择符E:hover的定义和用法:
设置元素在其鼠标悬停时的样式。E元素可以通过其他选择器进行选择,比如使用类选择符、id选择符、类型选择符等等。
特别说明:IE6并非不支持此选择符,但能够支持a元素的:hover ,也就是只支持通过类型选择符选择的a元素的:hover 。
语法结构:
E:hover{ Rules }
浏览器支持:
IE浏览器支持此选择符。火狐浏览器支持此选择符。
谷歌浏览器支持此选择符。
opera浏览器支持此选择符。
实例代码:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.manongjc.com/article/1323.html" /> <title>CSS教程</title> <style type="text/css"> #div:hover{color:#F60;} .js:hover{color:green;} </style> </head> <body> <ul> <li><a href="#">html专区</a></li> <li><a href="#" id="div">div+css专区</a></li> <li><a href="#" class="js">javascript专区</a></li> <li><a href="#">Jquery专区</a></li> </ul> </body> </html>使用类型选择符设置超链接的访问前的样式。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.manongjc.com/article/1323.html" /> <title>CSS教程</title> <style type="text/css"> #div:hover{color:#F60;} .js:hover{color:green;} </style> </head> <body> <ul> <li><a href="#">html专区</a></li> <li><a href="#" id="div">div+css专区</a></li> <li><a href="#" class="js">javascript专区</a></li> <li><a href="#">Jquery专区</a></li> </ul> </body> </html>通过类选择符和id选择符设置超链接在其鼠标悬停时的样式。在IE6中并不支持。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.manongjc.com" /> <title>码农教程</title> <style> div { width:100px; height:50px; background:#ccc; } div:hover { background:green; } </style> </head> <body> <div></div> </body> </html>上面的代码可以在鼠标悬浮于div时改变它的背景色,同时也说明,:hover伪类不仅仅作用域链接a元素。
相关文章推荐
- CSS :hover伪类选择定义和用法
- CSS :hover伪类选择定义和用法
- html系统学习之五 <CSS用法,选择器,伪类,伪元素>
- CSS定义超链接样式的顺序及四个伪类的用法示例介绍
- 链接伪类(:hover)CSS背景图片有闪动BUG的解决方法
- 在CSS中定义a:link、a:visited、a:hover、a:active顺序
- 在CSS中定义A:link/A:visited/A:hover/A:active顺序(LVHA)
- 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序
- 怎样用css的style分别定义两个超级链接的link,visited,hover颜色属性
- CSS中伪类:after的用法
- IE6下链接伪类(:hover)CSS背景图片有闪动BUG
- CSS中定义链接样式的四个伪类
- CSS伪类的一些用法以及visibility:hidden和display:none的一些区别
- css---hover伪类在ie6下的处理方式
- 在CSS中定义A:active/A:link/A:visited/A:hover顺序
- 在CSS中定义A:link/A:visited/A:hover/A:active顺序(LVHA)
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- a:link,a:visited,a:hover,a:active的使用和(CSS定义的)顺序
- IE中伪类:hover的使用及BUG,以及如何在IE6中进行修正(CSS)
- 简单了解学习CSS的伪类(特别是hover,actived)