Переход CSS не работает с привязным тегом

При работе с переходом CSS я вижу, что второй блок (с классом «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

Я предполагаю, что '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 не работает с привязным тегом

ответ

Смежные вопросы