img 标签不会从其父级继承过渡属性

Question

我希望我的图像标签自动从其祖父元素 (Div) 继承转换属性，但它不起作用。我不想再次编写相同的代码，因为还有其他元素我必须使用此属性。

 & .section-about--card {
    text-align: center;
    text-transform: capitalize;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    & img {
      width: 15rem;
      aspect-ratio: 1;
      border: 1px solid var(--red);
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      &:hover {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
      }
    }}

<div class="section-about--card">
            <div class="about-card--image">
              <img
                src="https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE.jpg"
                alt="animated market size photo"
              />
              <h3>dubai</h3>
            </div>
            <p class="about-card--details"> some data about the image
            </p>
          </div>

Answer 1

CSS 属性仅当一个元素是另一元素的后代时才能继承。在你的CSS代码示例中，你在“img”前面使用“&”，这意味着“和”。因此，样式将仅应用于具有两个选择器（.section-about--card 和 img）的元素。如果您的 img 标签位于 .section-about--card 内，您应该删除“&”，它应该可以正常工作。

Answer 2

transition

应该设置在您实际尝试设置动画/过渡的元素上。
另外，在父元素上设置

:hover

& .section-about--card {
  text-align: center;
  text-transform: capitalize;

  & img {
    width: 15rem;
    aspect-ratio: 1;
    border: 1px solid var(--red);
    border-radius: 50%;
    transition: all 0.3s linear;  /* move it here */
  }
  
  &:hover img {
    transform: rotateY(180deg);
  }

}

<div class="section-about--card">
  <div class="about-card--image">
    <img src="https://www.timeoutdubai.com/cloud/timeoutdubai/2021/09/11/hfpqyV7B-IMG-Dubai-UAE.jpg" alt="animated market size photo" />
    <h3>dubai</h3>
  </div>
  <p class="about-card--details"> some data about the image</p>
</div>