伪类选择符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. （DFS）codevs1004-四子连棋

    题目地址 方法是建立dfs,并在其中加入pre变量,记录之前移动的是W还是B.外面套for循环,从1步开始逐次递增,直到在i步时可以走完(dfs返回1),break退出循环,即为最短步. 本题的关键主 ...

  2. 游戏贴图中常用术语《DC》的理解

    什么是DC呢? 在GDI中,DC(Device Context)是一个非常重要的概念. 有的书中,将DC翻译为设备描述表,也有的书中翻译为设备上下文. 但是这些翻译,无法在我们的头脑里有强烈的冲击,无 ...

  3. plsql developer 导出导入存储过程和函数

    说明:需要把建表脚本及表数据分开导出,操作很简单.一.导出表及存储过程等对象:1. 登录PL-SQL Developer2. 选择只显示本用户的对象,如下图:3. 选择菜单“Tools——〉Expor ...

  4. 初学web开发——怎么解决无法找到路径的问题

    刚刚接触web开发一个月,在接手项目时,总会出项无法找到改路径的问题, 那么,这个是什么原因造成的呢?因为我现在使用的是MVC架构,大部分的原因是在View里创建了视图,但是并未在controller ...

  5. get到的新技能

    1.重拾选择器 (一)类选择器与id选择器的区别 W3C标准这样规定的,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class. 这样,一般网站分为头,体,脚部分,因为考虑到它们 ...

  6. windows核心编程---第五章 线程的基础

    与前面介绍的进程一样,线程也有两部分组成.一个是线程内核对象.它是一个数据结构,操作系统用它来管理线程以及用它来存储线程的一些统计信息.另一个是线程栈,用于维护线程执行时所需的所有函数参数和局部变量. ...

  7. gulp ---攻略一

    根据项目需要可能会出连载 项目需要现在用gulp进行js的质量检测.合并.压缩.发布,未来需要进行sass的编译.合并.压缩,html.img的压缩以及md5戳.reload等功能,暂时先测试js的质 ...

  8. watir学习系列--Watir API介绍

    文本框:          <INPUT id="email" name="_fmu.u._0.e" value="" />   ...

  9. 图片标签img中,为什么使用alt属性没用

    alt属性 alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的.所以alt属性的本意是用于替换图像,而不是为图像提供额外说明的,但是,在ie浏览器中,alt属性会变成文字提示,这本身是一 ...

  10. mongodb,redis,hbase 三者都是nosql数据库，他们的最大区别和不同定位是什么？

      不严谨地讲,Redis定位在"快",HBase定位于"大",mongodb定位在"灵活". NoSQL的优点正好就是SQL的软肋,而其弱 ...