超链接的缩放转换不起作用

Question

我想对包含在超链接中的图像进行比例转换。所有这些都包含在一个 div 中。我写了一些东西，但它不起作用。我需要图像是一个超链接，因为它必须将用户重定向到另一个页面。

提琴手

#logoemailcol {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#logoemailcol:hover #logoem {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

<div id="logoemailcol">
  <a href="" id="logoem" target="_blank">
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;">
  </a>
</div>

Answer 1

它没有按预期工作，因为锚元素是inline默认的，根据规范，元素应该是块级或原子内联级元素，以便它是“可转换的”。

因此，您需要display将元素的更改为inline-block或block以使其按预期工作。这样做时，该值inline-block将元素呈现为原子内联级元素，因此元素根据定义变得“可转换”。

更新示例

#logoemailcol {
  position: relative;
  cursor: pointer;
}
#logoemailcol:hover #logoem {
  transform: scale(1.15);
}
#logoem {
  display: inline-block;
  transition: all 0.5s;
}

<div id="logoemailcol">
  <a href="" id="logoem" target="_blank">
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;">
  </a>
</div>

当然，您也可以将转换应用于父元素，因为它是block水平的，但是我只是提供一个原因，说明它为什么不适用于锚元素。

以供参考：

CSS 转换模块级别 1 - 术语 - 可转换元素

可变形元素是属于以下类别之一的元素：

• 一个元素，其布局由 CSS 框模型控制，该模型是块级或原子内联级元素，或者其显示属性计算为 table-row、table-row-group、table-header-group、table-footer -group、table-cell 或 table-caption
• SVG 命名空间中的元素，不受 CSS 框模型控制，该模型具有属性 transform、'patternTransform' 或 gradientTransform。