比例：悬停前

Posted 2023-03-06

【中文标题】比例：悬停前

【英文标题】：Scale :before when hovering

【发布时间】：2017-03-07 08:19:46

【问题描述】：

当悬停在<span> 上时，我正在尝试缩放:before 的内容。 到目前为止，悬停时会应用样式，但没有视觉变化，:before保持相同的比例。

到目前为止我得到了什么：

<div class="comment-actions">
  <span class="comment-likes icon-ico-heart">
    12
  </span>
</div>

SASS (CSS)：

.comment-likes
  transition: all 100ms ease-in-out
  color: #92a3b9
  cursor: pointer

  &:hover::before
    transform: scale(1.5)

Icomoon：

.icon-ico-heart:before 
  content: "\e914";


[class^="icon-"], [class*=" icon-"] 
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

【参考方案1】：

在悬停时增加font-size 并向其添加transition 属性。

.icon-ico-heart:before 
    font-size: 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;


.icon-ico-heart:hover:before 
    font-size: 15px;

您可以只使用transition: font 0.3s ease; 仅对字体应用过渡，而不是all

【参考方案2】：

不要使用 scale 属性转换它，而是使用 font-size。所以：

.icon-ico-heart:hover:before 
    font-size: 20px;

【讨论】：

谢谢你的作品！对于未来的观众：您必须将过渡放在:before。

问题是如何缩放 ::before，而不是如何更改字体大小。

【参考方案3】：

您可能无法对字体或图标字体使用 scale 属性，

您可以使用字体大小属性来代替它。

【参考方案4】：

您不能转换 ::before 元素，因为它的显示类型是：display: inline， 您必须将其更改为 display: inline-block 或其他。

.icon-ico-heart:before 
  content: "\e914";
  display:inline-block;