Question

在使用CSS过渡时，我看到第二个块（带有类＆＃34; link1＆＃34;）不起作用，但是第一个块（带有类＆＃34; link＆＃34;）正在工作。我试图在悬停时放大锚标记内的文本。

我做错了什么？

＆＃13;

.link {
  width: 100px;
  height: 100px;
  background: red;
  transition: all .5s ease-in-out;
}
.link:hover {
  transform: scale(1.2);
}
.link1 {
  color: black;
  transition: all .5s ease-in-out;
}
.link1:hover {
  transform: scale(1.2);
}

＆＃13;

<!-- It works.-->
<div class="link"></div>
<br/>

<!-- It does not work-->
<a href=""><span class="link1"><strong>Facebook</strong></span></a>

＆＃13;

Answer 1

似乎scale不适用于内联元素，在此方案中span.link1。申请

.link1 { display: inline-block; }

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .link{
        width: 100px;
        height: 100px;
        background: red;
       transition: all .5s ease-in-out; 
    }
    
    .link:hover {
       transform: scale(1.2);
    }
    
    .link1{
     
        color:black;
        display: inline-block;
        transition: all .5s ease-in-out;   
    }
    .link1:hover{
        transform: scale(1.2); 
    }
    
    </style>
    </head>
    <body>
    
    <!-- It works.-->
    <div class="link"></div><br/>
    
    <!-- It does not work-->
    <a href=""> <span class="link1"><strong>Facebook</strong></span></a>
    
    </body>
    </html>

＆＃13;

CSS过渡不适用于锚标记

1 个答案: