Transform CSS属性不适用于< a>元件 [英] Transform CSS property doesn't work with <a> element
问题描述
我想点击它时 scale（x，y） my < a> 但它不工作。
I want to scale(x,y) my <a> element when I click on it, but it doesn't work. I use Mozilla Firefox web browser to run the program.
以下是我的代码：
<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>
推荐答案
transform 不适用于内联元素，例如< a> 。您可以显示链接 inline-block 或阻止以转换为工作：
transform is not applicable to inline elements such as <a>. You could display the link as inline-block or block to get transform to work:
transformable element
可变元素是以下类别中的一个元素：
A transformable element is an element in one of these categories:
- 一个元素，其布局由CSS框模型控制，该框模型是块级或原子行内元素元素，显示
属性计算到table-row，table-row-group，table-header-group，
table-footer-group，table-cell或table-caption [...] >
- an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [...]
其中 atomic inline-level 元素包括：
替换了行内元素-block元素和
inline-table元素
replaced inline-level elements, inline-block elements, and inline-table elements
a { display: inline-block; }
a:hover { transform: scale(2,2); }
此外，CSS中没有可用的点击状态。可能的选项是：active 或：hover ，或使用 checkbox hack 。
Besides, there's no on-click state available in CSS. Possible options are :active or :hover, or using 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; }
<a href="xyz.html">click here</a>
这篇关于Transform CSS属性不适用于< a>元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
