2

Нужно чтоб анимация была одновременная, сейчас же при ховере есть какая-то очередь.

a {
  text-decoration: none;
}

a .main {
  color: red;
  transition: all .5s ease;
}

a .second {
  color: black;
  transition: all .5s ease;
}

a:hover .main {
  font-weight: bold;
}

a:hover .second {
  color: blue;
}
<a href="#">
  <span class="main">Описание1 <span class="second">Описание2</span></span>
</a>

0

3 ответа 3

4

Если можно поменять вложенность, то так работает и в Хроме.

@import url(https://fonts.googleapis.com/css?family=Exo+2:400,900,800,700,600,500,300,200,100);
  
a {
  text-decoration: none;
}

a span {
  font-family: "Exo 2", sans-serif;
  transition: all .5s ease;
}

a .main {
  color: red;
}

a .second {
  color: black;
}

a:hover span {
  font-weight: bold;
}

a:hover .second {
  color: blue;
}
<a href="#">
  <span class="main">Описание1</span>
  <span class="second">Описание2</span>
</a>


Upd: Анимация для font-weight может быть абсолютно не заметной.

Если взять шрифт, который поддерживает полужирность от 100 до 900, то можно увидеть желаемый эффект. Правда при первом наведении у меня шрифт прыгает некрасиво, при дальнейшем наведении уже все хорошо.

@import url(https://fonts.googleapis.com/css?family=Exo+2:400,900,800,700,600,500,300,200,100);
  
a {
  text-decoration: none;
}

a span {
  font-family: "Exo 2", sans-serif;
  transition: all .5s ease;
}

a .main {
  color: red;
}

a .second {
  color: black;
}

a:hover span {
  font-weight: bold;
}

a:hover .second {
  color: blue;
}
<a href="#">
  <span class="main">Описание1</span>
  <span class="second">Описание2</span>
</a>

1

Убери 2 transition и поставь его просто на тэг <a>

a {
  text-decoration: none;
  transition: all .5s ease;
}

a .main {
  color: red;
}

a .second {
  color: black;
}

a:hover .main {
  font-weight: bold;
}

a:hover .second {
  color: blue;
}
<a href="#">
  <span class="main">Описание1 <span class="second">Описание2</span></span>
</a>

1
  • В таком случае, transition: all .5s ease вообще не играет роли 30 июл 2017 в 10:48
1

font-weight тоже анимируется. Если убрать его анимацию для вложенного блока, то всё станет хорошо. Кстати, я в принципе не уверен в целесообразности анимирования font-weight.

a {
  text-decoration: none;
}

a .main {
  color: red;
  transition: all .5s ease;
}

a .second {
  color: black;
  transition: color .5s ease;
}

a:hover .main {
  font-weight: bold;
}

a:hover .second {
  color: blue;
}
<a href="#">
  <span class="main">Описание1 <span class="second">Описание2</span></span>
</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.