div 的 CSS 转换不应影响内容

Question

我有外部 div 部分，在外部 div 内，我在鼠标悬停时有内部 div 部分，我只希望外部 div 部分应该是过渡，而内部 div 部分文本不应该过渡应该保持不变，有人帮助我实现它。

谢谢！

http://jsfiddle.net/zeYZL/56/

超文本标记语言

  <div class="outer">
        <div class='inner'>
            <p>inner text</p>
        </div>
    </div>

CSS

 .outer
{
  width:283px;
  height:298px;
  float:left;
  background:#101820;
  color:#fff;
  font-family:Lato;
  font-weight:900;
  font-size:3.4em;
  text-align:center;
  line-height:298px;
  transition:all 0.3s ease;
}
.outer:hover
{
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.03);
  width:283px;
  height:298px;
  cursor:pointer;
  background-color:#ffa300;
}

Answer 1

当 atransform应用于父级时，子级会自动受到影响，甚至添加transform: none到子级也不会产生任何效果。因此，最好的方法是将 添加transform到绝对定位的同级中

• 我使用了一个:pseudo元素:after来添加 abackground-color并添加scale到其中，这将防止孩子缩放

 .outer {
   width: 283px;
   height: 298px;
   float: left;
   color: #fff;
   position: relative;
   font-family: Lato;
   font-weight: 900;
   font-size: 3.4em;
   text-align: center;
   line-height: 298px;
 }
 .outer:after {
   content: '';
   background: #101820;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   transition: all 0.3s ease;
   z-index: -1;
 }
 .outer:hover:after {
   -webkit-transform: scale(1.3);
   -ms-transform: scale(1.3);
   transform: scale(1.03);
   cursor: pointer;
   background-color: #ffa300;
 }

<div class="outer">
  <div class='inner'>
    <p>inner text</p>
  </div>
</div>

Answer 2

与其他 css 一起为内部 div 添加以下内容。

 .inner:hover {
   -webkit-transition: none !important;
   -moz-transition: none !important;
   -o-transition: none !important;
   -ms-transition: none !important;
    transition: none !important;

}

你也可以将它与 jquery 混合使用。