伪类选择符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. GitHub Pages 搭建流程-基于jekyll-bootstrap

    我写这篇文章的目的是记录本博客的搭建过程,自己从零开始逐步搭建起来了GitHub Pages,其中借鉴了很多的博客和模版,稍后会在后面列出,也为没有用过gihub和jekyll的童鞋提供一点帮助. 学 ...

  2. java.lang.NoClassDefFoundError: org/aopalliance/aop/Advice

    今天在使用动态代理时,遇到了如下问题,报错 java.lang.NoClassDefFoundError: org/aopalliance/aop/Advice 下面是完整的报错信息: 一月 , :: ...

  3. 关于ASP.NET或VS2005 搭建三层架构的理解

    最近想学习ASP.NET建网站,关于ASP.NET或VS2005 搭建三层架构的理解,网上摘录了一些资料,对于第(2)点的讲解让我理解印象深刻,如下: (1)为何使用N层架构? 因为每一层都可以在仅仅 ...

  4. Linux提供两个格式化错误信息的函数

    #include “stdio.h” Void perror(__const char *__s); 其中__s是出现错误的地方,函数向标准错误输出设备输出如下:s:错误的详细信息. Eg.perro ...

  5. java EE实现动态SQL的

    结果图 情况一:

  6. SQL.WITH AS.公用表表达式（CTE）

    一．WITH AS的含义    WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候,是 ...

  7. MMDrawerController 的使用

    1.AppDelegate .h 文件:#import "MMDrawerController .h" @property (strong, nonatomic) MMDrawer ...

  8. JAVA中精确计算金额BigDecimal

    package com.chauvet.utils; import java.math.BigDecimal; import java.text.DecimalFormat; import java. ...

  9. centos7+nginx 1.9.0+php-fpm+phpstorm+xdebug+vmware开发环境搭建

    1.php-fpm yum install php-fpm 默认配置在本地9000端口监听 service php-fpm restart启动 2.nginx 1.9.0 需先安装gcc zlib o ...

  10. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...