css伪类中的表现类似于事件冒泡的，举个例子，当你滑过一个元素时，他会认为你也滑过了该元素的父元素，即使该元素看起来并没有包含在父元素里面，此处以:hover例子：

效果图：

滑过前：

滑过后：

CSS:

* {

    margin:0;

    padding: 0;

}

    body {

    padding:100px;

}

.par {

    width: 100px;

    height: 100px;

    background-color: pink;

}

.son {

    width: 200px;

    height: 50px;

    background-color: lightblue;

}

.par:hover,.son:hover {

    background-color: lightgreen;

}

HTML:

<body>

    <div class="par">par

        <div class="son">son</div>

    </div>

</body>

结构上，.son在.par里面，样式表现上，特意把.son超出了父元素，以达到那种，看起来我只滑过了子元素而没有滑过父元素的样子，那么请用鼠标滑过上图中的“鼠标滑过区域”

如上图效果，你滑过.son的时候，样式上，看起来没有滑过.par，但是结构上，你滑过了.par，所以.par上的:hover样式也自动应用上了,即使你给.son加上绝对定位也是一样的效果，因为html结构没有改；这种结果类似于js中的事件冒泡，关于事件冒泡，请参考JavaScript高级程序设计-第3版

此处可以放张图，方便大家留个印象:

行文仓促,如有错误,欢迎批评指正~~~

css 中的事件冒泡的更多相关文章

  1. Javascript中的事件冒泡与捕获

    事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部 ...

  2. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  3. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  4. 关于JQuery中的事件冒泡

    什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...

  5. javascript中的事件冒泡和事件捕获

    1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML ...

  6. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  7. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  8. jquery 中的事件冒泡

    废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...

  9. JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡

    对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...

随机推荐

  1. nopi使用 设置列样式 宽高 设置分页符

    HSSFWorkbook book = new HSSFWorkbook(); ISheet sheet = book.CreateSheet("test_01"); sheet. ...

  2. 【c#】设置Socket连接、接收超时

    用到Socket,发现如果连接错误,比如Connect的端口不对,会造成很长时间的延时,程序就僵在那里,效果很不好: 在网上找到很方便的设置办法,分享如下: Socket.SetSocketOptio ...

  3. Java并发编程（六）：Java里实现对象安全发布的四种方式

    接上篇,首先要了解什么是对象的发布与逸出? Java里安全发布对象的四种方法1.单例(注意懒汉和饿汉的区别)2.静态属性,注意类里的静态域和静态代码块的顺序有要求3.枚举4.final

  4. unity Editor下自启动

    [InitializeOnLoad] 加上这个特性,并且在静态构造函数里写上内容.即可在Unity启动的时候自启动这个Editor脚本

  5. PHPCMS 学习

    1.碎片管理2.为了升级操作 MY_ thinkphp为大写phpcms里面也是大写 然后继承如果加构造函数要调用一次父类的构造函数,最好在最上面调用 final 不可重写 重写最好调用一次paren ...

  6. Decoration1：Spring-boot基础实现

    前段时间发布的Traveller项目,花费了不少精力,但是效果并不如意,根源在于瀑布式的开发思想不适合这种独立的学习项目.在项目初始就规划一个全面的web系统,,因为预设了一个前景,在心理上会想尽快看 ...

  7. python学习之pypandoc

    对于程序员来说,文件格式之间的转换是一件非常费劲的事!比如md文件转化为html文件. 于是乎,就有一群牛人搞出了个神器,他就是pandoc. 而python中,对应的第三方模块就是pypandoc. ...

  8. oracle字符存储

     substr和substrb 以前知道有substrb,lengthb等函数,也知道它们是以byte来计算长度,可没用过,也不太明白什么地方需要用到它们.一直就是用substr,length,以 ...

  9. [Python]计算闰年时候出现的and和or优先级的问题以及短路逻辑

    好吧题目非常easy.可是有些细节还是挺有意思的. 题目是:计算今年是否是闰年,推断闰年条件,满足年份模400为0,或者模4为0可是模100不为0 答案是这种: import time #计算今年是否 ...

  10. libubox-runqueue

    参考:libubox [4] - uloop runqueue ustream 任务队列是通过uloop定时器实现,把定时器超时时间设置为1,通过uloop事件循环来处理定时器就会处理任务队列中的ta ...