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

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

css-transitions css

user3052443 · 技术社区 · 8 年前

这个问题已经有了答案:

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 回复 | 直到 8 年前

Andrzej ZióÅek 8 年前

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>

推荐文章

Luckkks · 过渡色工作不正常

1 年前

BogisW · CSS动画按钮/悬停时为span内容文本添加CSS转换

2 年前

markisawesome4 · 按钮:当您将鼠标移离按钮时,悬停时显示的内容下移后

2 年前

Bruno Oliveira · 如何在CSS转换完成后调用函数-React

2 年前

Ancross · 为什么我的小CSS动画不会触发?

4 年前

Jorge · :before和:after伪元素以接收过渡效果

8 年前

Arsalan Khattak · 线性渐变过渡

8 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

8 年前

Paul · 悬停时变换比例不缩放

8 年前

Willem van der Veen · CSS转换结合JS clickEvent

8 年前