伪类选择符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. 二模 (16) day1&day2

    第一题:题目大意: 数列a[0]=a[1]=1, a[n]=a[n-2]*a[n-1]*n,求a[n]的因子个数 mod 1000000007.  n<=1000000 解题过程: 1.递推式还 ...

  2. debug实战：Unmanaged High Memory非托管高内存

    最近又监控到一个高内存的问题,周五下班把系统打开,周末2天没关,周一来看已经涨到5.2G,这次与以往不同,不是.net的内存泄漏,而是非托管引起的. 1. 抓dump,确定高内存的类型 //dump有 ...

  3. Python学习笔记-字符串

    Python之使用字符串 1.所有的标准序列操作(索引,分片,乘法,判断成员资格,求长度,取最小值,最大值)对字符串同样适用.但是字符串都是不可变的. 2.字符串格式化使用字符串格式化操作符即%. f ...

  4. Struts 2之动态方法调用，不会的赶紧来

    学习Struts2框架以来为了减少Action 的数量,我们可以使用动态方法进行处理. 动态方法调用(Dynamic Method Invocation,DMI)是指表单元素的Action并不是直接等 ...

  5. Intent 四个重要属性

    Intent作为联系各Activity之间的纽带,其作用并不仅仅只限于简单的数据传递.通过其自带的属性,其实可以方便的完成很多较为复杂的操作.例如直接调用拨号功能.直接自动调用合适的程序打开不同类型的 ...

  6. android首次点击没反应，第二次才反应

    比如我写了个重置密码确认按钮的animation动画,动画代码都没问题,但等我输入密码,再点击这个确认按钮,动画没反应,第二次才反应 解决办法已经写到我的公众号,二维码在下面,欢迎关注,谢谢. 本人联 ...

  7. 一些java方法，一些感想

    String.valueof(),string,toString; 都是转化为字符串,如果为null的话用tostring会报空指针异常,String的效率最高,string.valuof效果最好. ...

  8. 论文笔记之：A CNN Cascade for Landmark Guided Semantic Part Segmentation

    A CNN Cascade for Landmark Guided Semantic Part Segmentation  ECCV 2016 摘要:本文提出了一种 CNN cascade (CNN ...

  9. 2、C#入门第2课

    1.XML文件读取 XmlDocument xml; string path = "F:\\C#\\功2016.xml"; if (System.IO.File.Exists(pa ...

  10. passing argument 3 of ‘wtk_hlv_rec_init’ discards ‘const’ qualifier from pointer target type

    -Werror,编译出现如下错误: src/wtk/exam/wtk_ndx.c:154:6: error: passing argument 3 of ‘wtk_hlv_rec_init’ disc ...