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

21 августа 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

Модель Flexbox Layout (Flexible Box) направлена на предоставление более эффективного способа выстраивания, выравнивания и распределения…

Условные комментарии более не поддерживаются Поддержка условных комментариев в стандартном режиме и режиме совместимости Internet…

Есть много разных способов анимировать SVG-изображения. Сейчас я рассмотрю и сделаю себе пометки, как сделать…

Пример кроссбраузерного варианта сделать картинку черно-белой с помощью CSS. IE11 не поддерживает filter. Make an…

Ответить