我希望我的图像标签自动从其祖父元素 (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>
CSS 属性仅当一个元素是另一元素的后代时才能继承。在你的CSS代码示例中,你在“img”前面使用“&”,这意味着“和”。因此,样式将仅应用于具有两个选择器(.section-about--card 和 img)的元素。如果您的 img 标签位于 .section-about--card 内,您应该删除“&”,它应该可以正常工作。
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>