<分区>
<分区>
我试图在悬停时旋转和缩放超链接，但它不起作用。我做错了什么？
HTML:
<footer class="footer">
<p class="footer__attribution">
Challenge by <a class="footer__link" href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a class="footer__link" href="#">Simeon Udoh</a>.
</p>
</footer>
CSS:
.footer {
&__link,
&:link,
&:visited {
color: $color-grey-light;
transition: all .2s ease-in;
text-decoration: none;
text-transform: uppercase;
background-color: $color-dark-blue;
cursor: pointer;
&:hover,
&:active {
transform: rotate(5deg) scale(1.3);
color: $color-red;
box-shadow: 0 1rem 2rem rgba($color-black, .1);
}
}
最佳答案
transform 属性可以应用于可变形元素。
transformable elementref
A transformable element is an element in one of these categories:
- all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],
- all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].
在这种情况下，对 anchor 使用display: inline-block:
.footer__link, .footer:link, .footer:visited {
color: #d3d3d3;
transition: all 0.2s ease-in;
text-decoration: none;
text-transform: uppercase;
background-color: #00008B;
cursor: pointer;
}
.footer__link:hover, .footer__link:active, .footer:link:hover, .footer:link:active, .footer:visited:hover, .footer:visited:active {
display: inline-block;
transform: rotate(5deg) scale(1.3);
color: red;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}<footer class="footer">
<p class="footer__attribution">
Challenge by <a class="footer__link" href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a class="footer__link" href="#">Simeon Udoh</a>.
</p>
</footer>关于html - CSS 变换旋转和缩放在悬停时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59226698/