<分区>
<分区>
我添加了代码以在将鼠标悬停在文本上时放大文本，但它不起作用。任何人都可以看到原因吗？这是我的 jsfiddle.我认为这不重要，但实际代码中使用的字体是通过 font-face 加载的，但我想我应该提一下。
<style>
.headerText {transition: all .2s ease-in-out;}
.headerText:hover {transform: scale(2.1);}
a.headerText {
font-family: arial;
font-weight:bold;
font-style:none;
font-size:28px;
text-decoration:none;
text-align:center;
color:purple;
white-space:nowrap;
margin-left:20px;
line-height:1.6;
}
a.headerText:hover {color:green;}
</style>
<span class="headerText"><a class="headerText" href="http://example.com">my link</a></span>
最佳答案
Transform 属性不适用于内联元素，并且 <span>就是其中之一。
Here您可以看到可以转换的元素列表。
A transformable element is an element in one of these categories:
an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS2]
an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, patternTransform or gradientTransform [SVG11].
设置display跨度的属性 inline-block或 block .
.headerText {
display: inline-block;
transition: all .2s ease-in-out;
}
.headerText:hover {
transform: scale(2.1);
}
a.headerText {
font-family: arial;
font-weight: bold;
font-style: none;
font-size: 28px;
text-decoration: none;
text-align: center;
color: purple;
white-space: nowrap;
margin-left: 20px;
line-height: 1.6;
}
a.headerText:hover {
color: green;
}<span class="headerText">
<a class="headerText" href="http://example.com">
my link
</a>
</span>关于css - 过渡不适用于文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51123801/