伪类选择符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伪类选择定义和用法的更多相关文章

  1. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  2. 【笔记】css hover 伪类控制其他元素

    最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...

  3. 利用CSS hover伪类改变其他元素的总结

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

  4. css -- hover伪类

    CSS代码: .btn-setDefaultGateway{display: none;} .netDiv:hover span .btn-setDefaultGateway { display: i ...

  5. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  6. CSS快速入门-鼠标悬浮(hover伪类)

    一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...

  7. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  8. 【CSS】伪类与伪元素

    一伪类 语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感.    与 CSS类搭配使用 selector.class : pse ...

  9. 奇妙的CSS之伪类与伪元素

    我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...

随机推荐

  1. fragment切换刷新 及下拉刷新

    此工程较BaiduLocationXMLFragmentDB相比:1.滑动fragment自动刷新该fragment2.下拉刷新fragment,上拉暂未实现 a.fragment切换刷新 1 . 由 ...

  2. Linux摄像头驱动学习之：（四）UVC-摄像头驱动框架分析

    UVC: USB Video ClassUVC驱动:drivers\media\video\uvc\ uvc_driver.c分析:1. usb_register(&uvc_driver.dr ...

  3. iOS ShareSDK 使用

    流量精灵软件中,也在大部分地方使用到了shareSDK 这个三方开源库.具体的有两种需求 a.弹出所有分享模块 b.只弹出指定的平台:如微信朋友圈和QQ . 配置方法,三方库中也很详细,这里我只有写出 ...

  4. C#面向对象的三大特性

    下面是面向对象的本人解析的图片可以让你们更好的理解一下!!! 一,封装: 我们可以把世界上任何一个东西都看作为一个对象,那么我们这里以人为例,一个人就肯定是一个对象了.那么封装是什么呢?封装就是这个人 ...

  5. scanf（）读取带空格的字符串

    #include <stdio.h> int main() { char str[128]; scanf( "%[^\n]", str ); printf( " ...

  6. UIkit框架之UIcollection

    1.继承链:UIScrollView:UIview:UIResponder:NSObject 2.collection view使用的数据源需要遵守UICollectionViewDataSource ...

  7. Linux下使用yum安装MariaDB

    版本:centos7 Linux下安装MariaDB官方文档参见:https://mariadb.com/kb/zh-cn/installing-mariadb-with-yum/ 1.创建Maria ...

  8. matlab使用

    1.nargin 在matlab中定义一个函数时, 在函数体内部, nargin是用来判断输入变量个数的函数. 2.assert “断言”,“坚持自己的主张”.判断函数. http://www.cnb ...

  9. LoadRunner常见问题

    1.Error -27257: Pending web_reg_save_param/reg_find/create_html_param[_ex] request(s) detected and r ...

  10. python数据结构与算法——桶排序

    桶排序的时间复杂度是O(M+N),通过建立对原始数据的有序统计表,实现非常快速的排序过程 可以用hashtable(或者dict)实现,查询复杂度为O(1) 贴代码: # 简单桶排序 从小到大 def ...