伪类选择符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. node

    docker run -d --name data -v c:/jayruanwork/app:/usr/share/app busybox || windows c:\jayruanwork\app ...

  2. CodeForces 688E-The Values You Can Make

    题意: 给出n,k,分别代表硬币的数量与巧克力的价格,n个整数c1,c2,...ci...cn(ci代表第i块硬币的值);你可以从n块硬币中拿出金额恰好为k的硬币数并将其中的任意两块硬币组合得到一个数 ...

  3. js动画之简单运动一

    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...

  4. android 自定义view -- 实现自定义 邮箱验证的Edittext

    //onFinishInflate 当View中所有的子控件均被映射成xml后触发 /** * 实现自定义 实现邮箱验证的EidtText */public class CustomEditText ...

  5. JSON序列化和反序列化的实例

    之前有项目中使用到了Json的序列化和反序列化,现在将使用的实例记录下来以备查阅.如有不妥,请指教. 代码的最终目的是得到一个符合 resultClass<List<rtnGetFindM ...

  6. js中的Bom对象模型

    Bom可以对浏览器的窗口进行访问和操作.使用Bom,开发者可以移动窗口,改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. window对象: 1.窗口操作 其中moveTo,moveBy是窗 ...

  7. js 中混乱this

    1.在HTML元素事件属性中inline方式使用this关键字:  <div onclick=" // 可以在里面使用this ">division element&l ...

  8. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  9. CentOS进程管理

    Linux系统中的基本运行单位是进程,通过对系统系统中的进程的管理能够对系统的实时运行状态进行了解和调度.Linux中提供了用于查看.调整和停止进程的命令.本文仍然以RHEL6说明Linux系统的进程 ...

  10. IT行业的正式入门

    虽然我是计算机专业毕业的大学生,但我自己认为我连什么是 IT都不了解,我热爱Java程序的设计,所以我现在在努力学习,今天是上Java程序设计的第一天,我正式进入IT业,踏上了这条“不归路”.figh ...