Question

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

谢谢！

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

当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>

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混合使用。

div的CSS转换不应影响内容

2 个答案: