代码之家 › 专栏 › 技术社区 › user3052443

转换不适用于文本[重复]

css-transitions css

user3052443 · 技术社区 · 6 年前

这个问题已经有了答案:

CSS transform doesn't work on inline elements 2个答案

我添加了一些代码,当鼠标悬停时可以放大文本,但它不起作用。有人知道为什么吗?这是我的 jsfiddle. 我认为这并不重要,但实际代码中使用的字体是通过字体加载的,但我认为我应该提到它。

    <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>

1 回复 | 直到 6 年前

Andrzej ZióÅek 6 年前

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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前