Html div的CSS转换'；不要影响内容

我有外div部分和内div我有内div部分鼠标悬停我只想外div部分应该是过渡和内div部分文本不应该过渡应该保持不变有人帮我实现它

谢谢

HTML

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

---

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

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

}

---

您也可以将其与jquery混合使用。

当将

转换应用于父级时，子级会自动受到影响，甚至将
转换：无
添加到子级也不会产生任何效果。因此，最好的方法是将
转换添加到绝对定位的兄弟姐妹


我使用了
：pseudo
元素
：after
来添加
背景色
，并向其添加了
缩放
，这将防止孩子缩放


.outer{
宽度：283px；
高度：298px；
浮动：左；
颜色：#fff；
位置：相对位置；
字体系列：Lato；
字号：900；
字体大小：3.4em；
文本对齐：居中；
线高：298px；
}
.外：之后{
内容：''；
背景：#101820；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
过渡：所有0.3秒缓解；
z指数：-1；
}
.外部：悬停：之后{
-webkit转换：规模（1.3）；
-ms变换：比例（1.3）；
转换：比例（1.03）；
光标：指针；
背景色：#ffa300；
}

内部文本

像这样？非常感谢@VitorinofernandesSpot on。仅供参考（也许您也可以将其添加到答案中），当将变换应用于父对象时，子对象会自动受到影响，甚至将
transform:none
添加到子对象也不会产生任何效果。因此，最好的方法是将
转换添加到绝对定位的兄弟姐妹（就像你所做的那样）。我不明白你在这里想说什么。这并不能解决老年退休金问题。我真的不需要jQuery。
 .inner:hover {
   -webkit-transition: none !important;
   -moz-transition: none !important;
   -o-transition: none !important;
   -ms-transition: none !important;
    transition: none !important;