CSS轉換不與錨標記一起工作

在處理CSS轉換時，我看到第二個塊（類爲「link1」）不工作，但第一個塊（類爲「link」）正在工作。我試圖放大懸停時錨標記內的文字。CSS轉換不與錨標記一起工作

我在做什麼錯？

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

<!-- It works.--> 
 
<div class="link"></div> 
 
<br/> 
 

 
<!-- It does not work--> 
 
<a href=""><span class="link1"><strong>Facebook</strong></span></a>

來源

2016-08-12 Orion

我假設'scale'不上內聯元素工作。嘗試應用'.link1 {display：inline-block; }'。 – connexo

與此類似http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements –

@connexo：是的它的工作！萬分感謝！ – Orion

看來scale不上內聯元素的工作，在這種情況下的span.link1。應用

.link1 { display: inline-block; }

<!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>

來源

2016-08-12 20:21:50 connexo

CSS轉換不與錨標記一起工作

回答

相關問題