转换CSS属性不适用于<a>元素

Question

转换CSS属性不适用于<a>元素

Adi*_*tya 15 html css css3 css-transforms

我点击它时想要scale(x,y)我的<a>元素,但它不起作用.我使用Mozilla Firefox Web浏览器来运行该程序.

这是我的代码:

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Has*_*ami 21

transform不适用于内联元素,如<a>.您可以将链接显示为inline-block或block转换为工作:

可变形元素

可转换元素是以下类别之一的元素:

一个元素,其布局由CSS框模型控制,该模型是块级或原子内联级元素,或者其显示属性计算为表行,表行组,表标题组,表脚-group,table-cell或table-caption [...]

当原子行内元素包括:

替换了内联级元素,内联块元素和内联表元素

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

Run Code Online (Sandbox Code Playgroud)

此外,CSS中没有可用的点击状态.可能的选项是:active或:hover,或使用复选框黑客.

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Aks*_*hay 6

使用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);
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，7 月前
查看次数：	6233 次
最近记录：	10 年，7 月前