转换 CSS 属性不适用于 <a> 元素 [重复]答案

【问题标题】：Transform CSS property doesn't work with <a> element [duplicate]转换 CSS 属性不适用于 <a> 元素 [重复]
【发布时间】：2015-04-16 07:16:37
【问题描述】：

当我单击它时，我想scale(x,y) 我的<a> 元素，但它不起作用。我使用 Mozilla Firefox 网络浏览器来运行程序。

这是我的代码：

scaleElement.html

<html>
    <head>
        <title>CSS3 Transform and Transition</title>
        <style>
            a{
                background-color: green;
                color: white;
                padding: 10px 20px;
                text-decoration: none;
                border: 2px solid #85ADFF;
                border-radius: 30px 10px;
                transition: 2s;
            }
            a:hover{
                transform: scale(2,2);
            }
        </style>
    </head>

    <body>
        <center><a href="xyz.html">click here</a></center>
    </body>
</html>

【问题讨论】：

标签： html css css-transforms

【解决方案1】：

transform 不适用于<a> 等内联元素。您可以将链接显示为 inline-block 或 block 以使转换工作：

transformable element

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

一个元素，其布局由 CSS 框模型控制，它可以是 block-level 或 atomic inline-level 元素，或者其显示属性计算为表行、表行组、表头组、 table-footer-group、table-cell 或 table-caption [...]

其中atomic inline-level 元素包括：

替换了行内元素、行内块元素和内联表元素

a { display: inline-block; }
a:hover { transform: scale(2,2); }

此外，CSS 中没有 on-click 状态可用。可能的选项是:active 或:hover，或使用checkbox hack。

a {
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #85ADFF;
  border-radius: 30px 10px;
  transition: all 2s;
  display: inline-block; /* <-- added declaration */
}
a:hover{ transform: scale(2,2); }
/* just for demo */
body { padding: 2em; text-align: center; }

&lt;a href="xyz.html"&gt;click here&lt;/a&gt;

【讨论】：

谢谢...运行正常。

【解决方案2】：

使用display:block 并为其指定高度和宽度

a {
  background-color: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #85ADFF;
  border-radius: 30px 10px;
  transition: 2s all ease-in;
  display: block;
  width:100px;
  height:50px;
}
a:hover {
  transform: scale(2, 2);
}

<center><a href="xyz.html">click here</a>
</center>

【讨论】：