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框模型控制,该框模型是块级元素或原子行内元素元素,或其显示
属性计算到表格行,表格行组,表格头组,
表格页脚组,表格单元格或表格标题[...]
- 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 [...]
其中原子内联级元素包括:
替换了行内元素,inline-block元素和
inline -table elements
replaced inline-level elements, inline-block elements, and inline-table elements
a { display: inline-block; }
a:hover { transform: scale(2,2); }
此外,CSS中没有 可能的选项是:active
或:hover
,或使用
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屋!