Transform属性不适用于内联元素
,和
<span>
是其中之一。
Here
您可以看到可以转换的元素列表。
可转换元素是这些类别中的一个元素:
-
一种元素,其布局由一个块级或原子内联级元素的CSS框模型控制,或其显示属性计算为表行、表行组、表标题组、表页脚组、表单元格或表标题[css2]
-
SVG命名空间中的元素,不受具有属性转换、模式转换或渐变转换[SVG11]的CSS框模型控制。
解决方案
设置
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>