CSS教程
CSS教程：HOVER伪类选择符的多重影分身之术
E:hover伪类选择符，是我们最熟悉不过的一个伪类了，而且运用也是非常的广泛，可以说在互联网中每个网站上面都会出现它的影子。我们不可否认已经对这个伪类选择符已经是相当的熟悉，但你是否真正的将它的功能发挥到淋漓尽致呢？嘿嘿……只要善于发现，我们就可以创造出非常有意思的东西来，大家是否还记得之前的分享给大家的一篇文章《创意CSS技巧：看图购》，这篇文章就是一个很好的示范，建议在读完这篇文章后，可以去看看这篇文章的效果以及设计原理，多想一想，多做一做。在这篇文章中就是巧妙的运用了hover的功能属性，出现了很多让人印象深刻的充满神奇的效果。其主要的原理是不变的，只是我们更加巧妙的设置多个层hover的效果，那今天将为大家详细的解读hover伪类选择符的多重影分身之术！我们将用例子来为大家做详细的介绍，先来看看这一组的伪类选择符： .main:hover { opacity: 0.5; /*---- 组一 ----*/}.main a:hover { opacity: 0.5; /*---- 组二 ----*/}.main:hover a { opacity: 0.5; /*---- 组三 ----*/}.main ul:hover a { opacity: 0.5; /*---- 组四 ----*/}.main:hover ul:hover a:hover { opacity: 0.5; /*---- 组五 ----*/}.main a:not(:hover) { opacity: 0.5; /*---- 组六 ----*/} 这些选择符你都能一一的了解其中的含义吗？其实我们稍加细心分析就能马上判断这些都代表了什么。我们理清楚了hover伪元素在不同地方以及出现多个hover时的基本原理，那我们就来看看一个实际的例子，在这个例子中简单的通过上面的分析总结，在多个地方巧妙的运用了hover伪元素，实现了具有很强交互性的三排列表效果。 首先是我们的一个简单的HTML结构： <div id="all"> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul></div> 然后我们最上面的结构进行hover的多重影分身处理，看css代码： body {margin:0; padding:0;}#all {margin:100px auto; padding:0; width:630px;}#all > ul { list-style: none; float: left; width: 200px; padding: 0 10px 0 0;}#all a { text-decoration: none; display: block; padding: 10px; background: #900; border-radius: 20px; color: white; text-align: center; margin: 0 0 5px 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease;}#all:hover a { opacity: 0.2;}#all:hover ul:hover a { opacity: 0.5;}#all:hover ul:hover a:hover { opacity: 1;} 关于hover伪类选择符的多重影分身之术就介绍到这里了，hover伪元素是个很有趣的东西，网上也有很多特效是利用hover来实现，就像本站（觉唯前端）的发布过的一篇文章《因为CSS3，动画将一切皆有可能》，其中的鼠标经过时显示动画就是运用了上面所说的组六原理，用hover伪类选择符结合否定伪类选择器来实现的。我相信关于hover还有很多实用的技巧还没挖掘出来，那么接下来为hover伪元素创造奇迹的你，还在等什么呢……
z-index属性的使用方法和层级树CSS教程
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.这个星期我们团队做了一次内部的技术分享, 南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.本文谈及多个影响节点显示层级的规则, 其中用到的所有例子全部罗列在《position 属性和 z-index 属性对页面节点层级影响的例子》中.如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点. <div id="a">A</div><div id="b">B</div> 如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以position:static不会影响节点的遮盖关系. <div id="a" style="position:static;">A</div><div id="b">B</div> 如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高. <div id="a" style="position:relative;">A</div><div id="b">B</div> 在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.