<img> 不会在元素内转换<figure>

Question

我想用transition:transform缩放:hover上图形内部的图像，但#image没有反应。

HTML:

<h1 id="title">Leo Tolstoy</h1>
<p class="subtext" id="subheader">An extremist with a cool beard</p>
<figure id="img-div">
<img id="image" src="tolstoi-portrait.jpeg"/>
<figcaption id="img-caption"    
class="subtext">Tolstoy thinking about salvation</figcaption>
</figure>

CSS：

#img-div{
background-color: var(--color-pink);
border-radius: 5px;
padding:2rem;
padding-bottom:0;
margin:1rem auto;
}
#img{
display: block;
transition: transform 1s;
}
#img:hover{
transform: scale(1.05,1.05);
}

为什么transform适用于容器<figure>，但不适用于嵌套的<img>？

的外观

Answer 1

#img没有转换，至少在您的示例中是这样。转换不是继承的。

在您的标记上，我没有看到带有id="img"的元素，这就是您在css上使用#img { ... }的目标。

如果你想以<img>元素为目标，那么你可以在css上写img { ... }(没有#(

此外，使用类而不是id来设置元素的样式也是一个好主意

您可以更改html以将类添加到图像中，例如