Как сделать так, чтобы определенные -webkit-переходы относились к: focus, а некоторые к: hover?

Question

В моем коде я хочу, чтобы мой -webkit-transition: border 2s; ссылался на наведение, а для -webkit-transition: border 2s; // a different colored border on :focus - на фокус.Как я могу это сделать?Требуется ли JavaScript?

Answer 1

selector {
   border: 1px red solid;
   -webkit-transition: border 2s;
}
selector:hover { border: 5px red solid; }
selector:focus { border: 1px green solid; }

в селекторе вы указываете border сокращенное свойство и переход, который изменит только это конкретное свойство

так, в псевдоклассах hover и focus вы измените это конкретное свойство в зависимости от того, что вы хотите изменить

Answer 2

*selector:hover {
    -webkit-transition: 2s; }

*selector:focus {
    -webkit-transition: border 2s; }

Довольно простой CSS.