не понимаю как сделать так чтобы при наведении на текст hover снизу текста появлялась картинка, помогите
2 ответа
.foo:hover .hidden-img{
display: inline-block;
}
.hidden-img{
display: none;
}
<div class='foo'>
<p>Текст</p>
<img class="hidden-img" src="https://i.pinimg.com/736x/b9/59/f1/b959f1670d2631589643575de5a782b7.jpg" alt="Тест">
</div>
Помещаем картинку и текст внутрь обёртки и на неё вешаем hover
P.S. Изначально теги div и p - блочные и занимают всю ширину. Поэтому по наведении на строку, где они содержатся, hover будет срабатывать. Если это не нужно - .foo и p нужно сделать display: inline-block
-
А вы точно уверены, что когда я навожу курсор справа от текста (Не на текст), изображение должно появляется?– ΝNL99326 янв в 19:03
-
Это происходит из-за того, что p изначально display:block и занимает всю строку. Чтобы такого не было - можно добавить к p display: inline-block или другой 27 янв в 5:31
-
Я знаю почему это происходит, другое дело что по вопросу, ваш ответ не совсем корректный, нужно сделать так, чтобы (внимание цитата) "при наведении на текст снизу текста появлялась картинка", а у вас получается при наведении на блок
.foo
.– ΝNL99327 янв в 7:20 -
А я бы сделал так:
.img-onhover img {
display: none;
}
.img-onhover .img-onhover-text {
display: inline-block;
}
.img-onhover .img-onhover-text:hover + img {
display: block;
}
<div class="img-onhover">
<p class="img-onhover-text">Hover on Me!</p>
<img src="https://i.stack.imgur.com/cmRDh.png">
</div>