Делаем кликабельными ссылки на элементах <object> в Chrome

21.08.2018

Делаем кликабельным <object> с помощью CSS (проблема была замечена только в Chrome)

Вешаем ссылку на svg-иконку:

<a href="#" class="svg">
  <object data="img/twitter.svg" type="image/svg+xml" class="mailicon"></object>
</a>

Добавляем такие стили для того, чтобы ссылка работала:

a.svg:after {
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

В чем минус — на иконку нельзя будет повесить события типа ::hover

Полезная инфа:

Оставить комментарий