在前端页面制作中，我们时常要用到移动显示、隐藏的动态效果，我们一般采用js来实现此效果。不过在大部分情况下，我们也可以使用hover来实现此动态效果。

在此，我谈一谈我对hover的用法，请看以下代码：

<html>
<head>
<title>1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
.a{width: 800px;height: 100px; color:#333;}
.a a:hover{color:red;}
.a a:hover span{color:green;}
.a:hover span{color:blue;}
</style>
<body>
<div class="a">
<a href="#">示例div a标签<span>示例a标签内的span标签</span></a>
<span>示例a标签外的span标签</span>
</div>
</body>
</html>

在上面这一段代码中，示例a标签内的span标签实现了hover的效果，字体颜色变为绿色，然而示例a标签外的span标签却并没有变成绿色，而是实现了.a:hover的效果，变成了蓝色。

原因很简单，当我们写下a:hover时，我们就已经给它定义了作用域，那就是当前a标签。此时，只有a标签内的标签，才能进一步选定，执行hover效果。

当我们写下.a:hover时，我们同样已经给它定义了作用域，那就是当前a类。此时，只有a类内的标签，才能进一步选定，执行hover效果。

因此，当我们需要实现hover效果时，只有父标签下的子标签才能被父标签hover。

浅谈hover用法的更多相关文章

  1. 浅谈Dictionary用法

    一.基础篇 1.Dictionary泛型类提供了从一组键到一组值的映射,即键和值的集合类. 2.Dictionary通过键来检索值的速度是非常快的,这是因为 Dictionary 类是作为一个哈希表来 ...

  2. 浅谈 echarts 用法

    对于服务型的公司来说,需要了解用户的使用趋势,来帮助分析市场的走向,所以说统计在一个管理后台中是必不可少的. 会用到echarts插件 ,其官网网址 http://echarts.baidu.com/ ...

  3. 浅谈Python在信息学竞赛中的运用及Python的基本用法

    浅谈Python在信息学竞赛中的运用及Python的基本用法 前言 众所周知,Python是一种非常实用的语言.但是由于其运算时的低效和解释型编译,在信息学竞赛中并不用于完成算法程序.但正如LRJ在& ...

  4. 浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别

    浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别 Spring 2.5 版本新增了注解功能, 通过注解,代码编写简化了很多:但熟悉注解的使 ...

  5. 浅谈HTTP中GET、POST用法以及它们的区别

    浅谈HTTP中GET.POST用法以及它们的区别 HTTP定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符.我们可以这样认为: 一 ...

  6. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  7. [技术]浅谈OI中矩阵快速幂的用法

    前言 矩阵是高等代数学中的常见工具,也常见于统计分析等应用数学学科中,矩阵的运算是数值分析领域的重要问题. 基本介绍 (该部分为入门向,非入门选手可以跳过) 由 m行n列元素排列成的矩形阵列.矩阵里的 ...

  8. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

  9. 浅谈SQL注入风险 - 一个Login拿下Server

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

随机推荐

  1. navicat操作mysql数据库

    1.利用mysql来做ER图 1.1点击模型->新建模型->点击表->新建表,这样就可以了 1.2 建好的ER图->工具 有导出到sql ,有同步到数据库 1.3 建好的表,可 ...

  2. jquery如何将信息遍历到界面上

    1.使用的时候一定要导入juqery库 1.1 这里放置一个cdn的库 <script src="https://cdn.staticfile.org/jquery/1.10.2/jq ...

  3. 计算机网络，HTTP - 如何查看一个网站是否使用HTTP/2?

    方法 HTTP/2用":authority"头部代替"Host"头部. Chrome F12里面,HTTP/1.1有"view source" ...

  4. 开发笔记—钉钉服务商应用isv开发，从应用配置，到获取客户企业通讯录

    以第三方企业微应用为例 在第三方企业微应用应用时,比较底层的需求,就是应用需要获取客户企业的通讯录,即部门/员工的数据.本人整理以下几个关键数据,供大家开发参考. 新建第三方微应用时,能拿到这些初始数 ...

  5. 线程池(ExecutorService)初体验

    背景:查询月统计数据,因为查询日统计数据功能已经实现.月统计数据,只是参一个List(date) 参数,for循环调用日统计,然后把结果整合就OK. 问题:单线程跑  太耗时间 解决方案:使用多线程, ...

  6. 牛客多校第三场F Planting Trees 单调栈

    Planting Trees 题意 给出一个矩阵,求最大矩阵面积满足该矩阵中任2元素的绝对值之差小于等于M T<1000) (n<500)但是题目明示单组(n*3)可过 分析 又是矩阵问题 ...

  7. 解决mailx发邮件报错：esmtp-server: 504 5.7.4 Unrecognized authentication type [HK2PR02CA0167.apcprd02.prod.outlook.com] "/root/dead.letter" 11/302 . . . message not sent.

    报错信息: esmtp-server: 504 5.7.4 Unrecognized authentication type [HK2PR02CA0167.apcprd02.prod.outlook. ...

  8. swagger2 常用注解的使用

    一.@Api 效果: @Api注解放在类上面,这里的value是没用的,tags表示该controller的介绍. 二 .@ApiOperation 效果: @ApiOperation注解用于放在方法 ...

  9. Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览

    一.设计原理 1.Hadoop架构: 流水线(PipeLine) 2.Hadoop架构: HDFS中数据块的状态及其切换过程,GS与BGS 3.Hadoop架构: 关于Recovery (Lease ...

  10. python接口自动化测试 - requests库的基础使用

    简单介绍 requests库简单易用的HTTP库 Get请求 格式: requests.get(url) 注意:若需要传请求参数,可直接在 url 最后的 ? 后面,也可以调用 get() 时多加一个 ...