Question

I was trying to scale the <a href="#">anchor tag</a> by using

a:hover {  transform: scale(1.5) }

Just like I use h1:hover{ transform: scale(1.5); } to scale the heading.
But it's not working, the anchor tag doesn't scale.

Answer 1

缩放对内联元素无效，请为锚标记设置display: inline-block;，该标记应起作用。

a{
  display: inline-block;
}

让我知道这是否对您有帮助！

Answer 2

如果您使用的display:inline-block属性不同于display:inline，则可以缩放元素。
HTML：
<a href="www.google.com">Go To Google</a>

CSS

a:hover{
  display:inline-block;
  -ms-transform: scale(5.5, 5.5); /* IE 9 */
    -webkit-transform: scale(5.5, 5.5); /* Safari */
    transform: scale(5.5, 5.5);
}

Answer 3

您需要添加浏览器前缀：

a:hover 
{  
   -ms-transform: scale(1.5, 1.5); /* IE 9 */
    -webkit-transform: scale(1.5, 1.5); /* Safari */
    transform: scale(1.5, 1.5);
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
 <a class="btn btn-primary" href="#">anchor tag</a>

如何制作锚标记<a> scale by hovering on it?

3 个答案: