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奇技淫巧之堆叠上下文》。

到现在，我基本解决了这个小坑。