Я создаю stati c HTML веб-страницу, используя html5 -boilerplate_v8, и столкнулся с препятствием.
Я добавил 4 значка социальных сетей, используя PNG с прозрачным фоном, и я хочу, чтобы фон изображения становился белым при наведении курсора.
Прямо сейчас HTML для одного значка выглядит так:
<div class="channels">
<a class="channels__item" href="https://www.facebook.com/person.name" target="_blank"><img
src="img/icons8-facebook-50.png" alt="facebook" width=40 height=40></a>
А CSS выглядит вот так:
.channels {
margin: 0 auto;
padding-top: 10px;
}
.channels__item {
margin-left: 5px;
margin-right: 5px;
}
.channels__item:hover {
background-color: #fff;
}
Что происходит, когда я наводю курсор на значок, ширина правильная, но высота составляет только половину значка (при центрировании по середине значка).
Вместо этого мне нужно, чтобы высота растягивалась от верха до низа значка, в соответствии с тем, как ведет себя ширина.
Я встречал похожие вопросы, задаваемые по меню навигации (настроено как неупорядоченные списки), но, как видите, мой сценарий должен быть намного проще ...
К сожалению, после различных попыток единственное, что имело какой-либо эффект, - это добавление отступа в 10 пикселей в состояние наведения. На самом деле это выглядело неплохо, но при наведении курсора на них значки смещались по горизонтали (что выглядит нелепо). Кроме того, это выглядит хакерским, и я уверен, что должен быть способ получше.
Я почти уверен, что эта высота соответствует размеру текста, а не размеру значка, но по какой-то причине я не могу понять как это исправить. Спасибо за любой совет!