2017年6月30日15:05:46
今天在写一个demo的时候，发现CSS3中transform变换的一个特性。
首先，我先描述一下我发现的情况（问题再现）：
<div class="box box-mission">
<span class="icon"></span>
<div class="button">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
GHOST
</div>
</div>
如上代码块，在一个div盒子中有两个组成部分，一个是span，一个是div。
// span样式
.box .icon {
display: inline-block;
width: 100%;
height: 190px;
// 解决方法1
// margin-bottom: 20px;
transition: .2s linear;
-ms-transition: .2s linear;
-o-transition: .2s linear;
-webkit-transiton: .2s linear;
-moz-transition: .2s linear;
}.box-mission .icon {
background: url("mission.png") no-repeat center center;
}.box-mission .icon:hover {
transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
}
// class为button的div的样式
box .button {
// 解决方法2
// position: relative;
width: 180px;
height: 50px;
padding-left: 10px;
line-height: 50px;
color: #2DCB70;
font-weight: bold;
border: 2px solid rgba(255,255,255,0.8);
background: url("allow.png") no-repeat 130px center;
transition: .2s ease;
-ms-transition: .2s ease;
-webkit-transition: .2s ease;
-o-transition: .2s ease;
-moz-transition: .2s ease;
}.box .button:hover {
border: 2px solid rgba(255,255,255,0.8);
background-position: 160px center;
}
如上代码块，分别为上面提到的两个组成部分.icon和.button的样式，.icon和.button都有一个hover（鼠标悬浮）的效果，.icon被hover时进行了一个transform变换。显示效果如下：
接下来就是重点：当我在.icon上hover后，.icon应用了transform的样式，下一步我让鼠标慢慢向下移动到.button的区域，.button的hover效果并未立即出现，等到我移动鼠标过半的时候，hover样式生效了！！！
我脑海中有个奇怪的问题：难道元素的hover事件会被阻塞吗？
解决方法：
因为我是看完教学视频，感觉效果不错，想凭自己的记忆还原出原来的效果。所以我找到原始代码，一对照，原来是少了一个position:relative，就是上面的解决方法2。
后来我注意到.icon的hover样式中有transform:scale(1.2)，放大1.2倍的效果。我想是不是因为.icon的放大，把下面.button区域遮住了，于是想出了解决方法1，就是增加.icon的底部外边距。
解决方法可能不止这两种吧。
进一步，我在想这个hover效果为什么和平时不一样，不就是多了个CSS3的transform吗？
Google了一下，在http://www.html-js.com/article/2518 《transform你不知道的那些事》中，我看到下面的一些文字：
任何非none的transform值都会导致一个堆叠上下文（stacking context）和包含块（containing block）的创建。
这个CSS3中transform导致了一个堆叠上下文的创建，导致.icon所在的上下文环境在.buttion的上面，遮挡了.button的区域，因此出现了上面的问题。解决方法1，是将.icon经过transform变换的区域预留出来，这样就不会影响会别的元素了。解决方法2，是通过position:relative产生一个新的堆叠上下文，让.button在.icon经过transform后的区域的上面。产生一个新的堆叠上下文的方法，也是同一个博主的文章http://www.html-js.com/article/2523 《W3C奇技淫巧之堆叠上下文》。
到现在，我基本解决了这个小坑。
