Задать вопрос

Ховер ссылки cо сменой цвета + svg картинкой + transition

Вобщем такая задача, нужно сделать ссылку с svg картинкой, на страницу сайта, + чтобы transition плавно менял цвет svg картинки и ссылки, думаю звучит все просто и ясно )

HTML

<a href="index.html">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9px" height="14px" viewBox="0 0 9 14" enable-background="new 0 0 9 14" xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#404C54" d="M7,0l1.414,1.414l-7,7L0,7L7,0z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#404C54" d="M0,7l1.414-1.414l7,7L7,14L0,7z"/>
  </svg>
   Home
 </a>


CSS

a {
  transition: all .4s ease;
  color: #111;
  text-decoration: none;
}
a:hover {
  color: #aaa;
}
a svg > path {
	transition: fill .4s ease;
}
a:hover svg path {
	fill: #aaa;
}


И это работало,
Но вот хром, имено хром, мой любимый браузер тут меня подвел,
когда я перешел по ссылке, хром ее сделал :visited, и тут вся прелесть испортилась,
просто перестал работать transition для svg картинки, на отказ.
Может кто то знает решение или что то еще чтобы это исправить?

MAC OS X, Google chrome Версия 34.0.1847.137
  • Вопрос задан
  • 8864 просмотра
Подписаться 4 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Python-разработчик
    10 месяцев
    Далее
  • Skillfactory
    DevOps-инженер
    6 месяцев
    Далее
  • Хекслет
    Фронтенд-разработчик
    10 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 2
denver
@denver
Дай ссылку на jsfiddle.net
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы