CSS-преобразование div не должно влиять на содержимое

Question

У меня есть внешняя секция div и внутри внешнего div у меня есть внутренняя секция div при наведении мыши. Я хочу, чтобы только внешняя секция div должна была быть переходом, а внутренний текст раздела div не должен был проходить транзитом, должен оставаться постоянным помогите мне в достижении этого.

Спасибо!

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

HTML

<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

Наряду с другими CSS добавить следующее для внутренних дел.

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

}

Вы можете смешать его с JQuery тоже.

Answer 2

, когда к родительскому элементу применяется transform, и ребенок автоматически получает влияние, и даже добавление transform: none к ребенку не будет иметь эффекта. Таким образом, лучший подход заключается в добавлении transform к абсолютно расположенным собрата

• Я использовал :pseudo элемент :after добавить background-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>