当悬停某个元素但不影响其他元素过渡属性时

Question

我正在尝试显示我的

p

文本，它不使用过渡。 我试图从一小时内解决它，但不明白为什么它不起作用。

.section-about--card {
  width:100%;
  height: 15rem;
  border: 1px solid black;
  transition: all 1s linear; 
  & .about-card--details {  
    text-align: center;
    text-transform: capitalize;
    height: 0px;
    overflow: auto;
  }
  &:hover .about-card--details{
    height:50px;
  }
}

<div class="section-about--card">
  <p class="about-card--details">
    some text
  </p>
</div>

Answer 1

CSS

Transition

不会被子元素继承。将过渡添加到子级 .about-card--details

。

.section-about--card {
  width:100%;
  height: 15rem;
  border: 1px solid black;
  & .about-card--details {  
    text-align: center;
    text-transform: capitalize;
    height: 0px;
    overflow: auto;
    transition: all 1s linear; 
  }
  &:hover .about-card--details{
    height:50px;
  }
}

  <div class="section-about--card">
    <p class="about-card--details">
      some text
    </p>
  </div>

Answer 2

我不确定您想要增大文本的字体还是想要增大文本容器的高度。

让我们涵盖这两种情况：

在您的示例中，您只需向 .about-card 添加背景颜色 -

background-color: yellow;

 等详细信息，使其更加

引人注目

并且您的过渡位置错误 请将

transition: all 1s linear;

 移至 

& .about-card--details

，因为您希望在 

.about-card--details 上完成转换

第二种情况，如果你想让字体变大，你只需执行以下操作：

.section-about--card {
  width: 100%;
  height: 15rem;
  border: 1px solid black;

  .about-card--details {
    text-align: center;
    text-transform: capitalize;
    height: 10px;
    transition: all 1s ease;

    &:hover {
      height: 50px;
      font-size: 50px;
      background-color: yellow;
    }
  }
}