在前端页面制作中，我们时常要用到移动显示、隐藏的动态效果，我们一般采用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. Docker（二）Image 与网络

    Docker Image 我们介绍一下如何构造一个自定义的 Docker  Image.在Docker 中,我们使用Dokcerfile 构建一个docker的描述. 首先我们定义一下需要启动一个什么 ...

  2. [P4550] 收集邮票 - 概率期望,dp

    套路性地倒过来考虑,设\(f[i]\)表示拥有了\(i\)种票子时还需要多少次购买,\(g[i]\)表示还需要多少钱 推\(g[i]\)递推式时注意把代价倒过来(反正总数一定,从顺序第\(1\)张开始 ...

  3. 用navicate 连接本地数据库提示用户名/口令无效

    1.在用navicate连接本地的oracle数据库时,试了oracle几个默认的用户名和密码,但是当我输入时,却提示用户名/口令无效.所以按照网上的办法,cmd,输入了以下命令,修改了几个用户的用户 ...

  4. 【sql】sql必知必会_02

    chapter10 - 常用的sql标准有哪些,在SQL92中是如何使用连接的? sql两个主要的标准sql92.sql95: sql92中的五种连接方式: a.笛卡尔积:是一个数学运算,两个集合X和 ...

  5. 【译】通过 Rust 学习解析器组合器 — Part 1

    原文地址:Learning Parser Combinators With Rust 原文作者:Bodil 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gol ...

  6. 计算机网络 - TCP_NODELAY 和 TCP_CORK, TCP_NOPUSH

    参考 https://www.cnblogs.com/biyeymyhjob/p/4670502.html https://stackoverflow.com/questions/3761276/wh ...

  7. app项目中遇到TCP分包，H5端对分包进行拼包

    之前有个需求,由于H5端不支持TCPSocket通信,于是中间搭了个安卓框架作为通信的介质,在开发中遇到一个问题,当后端传一个比较大的数据上来时,一条完整的数据会没有规矩的分成若干个包,每条数据可能不 ...

  8. form中把图片设为按钮

    提交按钮sumbit <input type="image" src="图片路径">//type="image"默认是sumbi ...

  9. FreeRTOS学习笔记4：时间管理

    绝对时间:abs Time相对时间:百分比% time IDLE是空闲任务. RUN_Time_State:port...()初始化一个外设提供时基单元 //具体初始化要自己操作这个定时器的分辨率高于 ...

  10. 思科ACS的性能总结

    ACS Performance & Scale 思科ACS目前还能支持的可能就是ACS5.8版本了,该版本也将于2020年停止支持,关于ACS信息会逐步退出大家的视野.该文档是Cisco论坛t ...