アンカータグでCSSトランジションが動作していません

CSSトランジションでは、2番目のブロック（クラス "link1"）が動作していませんが、最初のブロック（クラス "リンク"私はホバー上のアンカータグ内のテキストを拡大しようとしています。アンカータグで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

を適用します。 '.link1 {display：inline-block; } '。 – connexo

これに似てhttp://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements –

@connexo：うん、それは働いた！ありがとう、トン！ – Orion

scaleこのシナリオspan.link1では、インライン要素では動作しませんようです。私はscale`はインライン要素では動作しません `と仮定してい

.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トランジションが動作していません

答えて

関連する問題