Показать div при наведении курсора на изображение JQuery
Я потратил добрых 30 минут на S.O, чтобы найти решение, но все еще не могу его найти. Наверное, из-за того, что я точно не знаю, что искать.
В основном у меня есть div, который содержит изображение и текст. Текст должен появиться на изображении только после того, как я наведу на него курсор. Все структуры HTML и CSS хороши, и у меня проблема с функцией JQuery для hover, в основном из-за того, что я знаю, как выбрать внутренний div (а не как использовать саму функцию hover).
То, что я пытаюсь сделать, - это когда я нахожу изображение div (img-container), он показывает текст (hover-img) на этом изображении.
Ниже мой код:
HTML
<div id = "content" class = "col-12">
<!-- Image Gallery -->
<div class = "col-lg-4 col-md-6 col-xs-12 img-container">
<img class = "img-gal" src = "#" />
<div class = "hover-img">
<p class = "img-text">Text on Hover</p>
</div>
</div>
</div
CSS
.img-container{
float:left;
margin: 0;
padding: 0;
cursor: pointer;
position: relative;
}
.img-gal{
width: 100%;
height: auto;
position: relative;
}
.hover-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:10;
color: #fff;
display: none;
}
.img-text{
text-align: center;
position: relative;
top: 50%;
font-weight: 300;
font-size: 1em;
letter-spacing: 2px;
}
JS
//Hover Image. Need to show the Text when hovering on an image
$('.img-container').hover(function(){
//Stuck here. How to show the text? fadeIn()? But what?
},function(){
//Stuck here. How to show the text? fadeOut()? But what ?
});
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете добиться этого с помощью чистого CSS:
.hover-img {
display: none;
position: absolute;
top: 0;
}
.img-gal:hover ~ .hover-img, .hover-img:hover {
display: block;
}<div id = "content" class = "col-12">
<!-- Image Gallery -->
<div class = "col-lg-4 col-md-6 col-xs-12 img-container">
<img class = "img-gal" src = "https://www.gravatar.com/avatar/0104050baad43a135d1084a1b3ec35d4?s=32&d=identicon&r=PG&f=1" />
<div class = "hover-img">
<p class = "img-text">Text on Hover</p>
</div>
</div>
</divЧто значит «мигает как сумасшедший»? Кажется, что появляется при наведении курсора на изображение и исчезает при наведении курсора.
Я имею в виду, что когда я использую здесь ваш CSS, он в принципе работает, появляется текст. Но мерцает очень быстро, как будто мигает. Я не знаю, как это объяснить. Текст не остается неподвижным, но продолжает быстро мигать. Я не знаю, может ли это быть абсолютное положение или что-то в этом роде?
.hover-img появляется прямо над изображением? Если это так, то если мышь окажется над .hover-img при срабатывании .img-gal:hover, правило display: block перестанет применяться - до тех пор, пока текст не исчезнет и .hover-img не начнет снова зависать. Вы можете добавить правило, чтобы .hover-img продолжал отображаться при наведении курсора. См. Править
Это именно то, что я пытаюсь. .hover-img появляется прямо над изображением. Теперь я понимаю, что именно поэтому он мерцает. Ваше редактирование работает отлично! Спасибо. Просто хотите знать, как работает эта штука ~ в CSS? Как это называется? Никогда не видел этого раньше
Это общий комбинатор братьев и сестер developer.mozilla.org/en/docs/Web/CSS/General_sibling_select ors
Вы делаете это только с помощью CSS. Добавьте эту строку в свой css
.img-gal:hover + .hover-img {
display:block;
}
если вы хотите сгладить эффект, добавьте эту строку в .hover-img. и удалите display:none
.hover-img {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
и на изображении наведите курсор на это
.img-gal:hover + .hover-img {
visibility: visible;
opacity: 1;
}
Работает лучше с переходом, но все еще мигает при отключении мыши. Также он не работает идеально, пока я меняю div, не знаю почему.
Сейчас я использую мобильный телефон, поэтому я не могу правильно тестировать. Я покажу вам демо через некоторое время.
CertainPerformance первой нашла решение. Я даю вам положительный голос, потому что ваше решение работает, и я применю вашу технику перехода к приведенному выше ответу. Спасибо за вашу помощь :)
Это нормально, @nTuply. Я здесь, чтобы помочь тебе. Не за голосование :)
Как уже упоминалось, здесь нет необходимости в jQuery, вы можете добиться этого только с помощью html / css, используя переход css и изменив непрозрачность и положение текстового слоя.
https://jsfiddle.net/86bjzedh/
проверьте эту скрипку для рабочего примера
CSS:
.gallery li {
overflow: hidden;
background-size: 100% 100%;
float: left;
display: block;
width: 200px;
height: 200px;
margin: 5px;
}
.gallery span {
display: block;
width: 100%;
height: 100%;
opacity: 0;
transform: translateY(100%);
transition: .3s linear all;
text-align: center;
color: #000;
font-size: 15px;
font-family: tahoma;
background-color: rgba(255, 255, 255, .8);
padding-top: 30px;
box-sizing: border-box;
}
.gallery li:hover span {
transform: translateY(0);
opacity: 1;
}
HTML:
<ul class = "gallery">
<li style = "background-image:url(https://cdn.pixabay.com/photo/2018/01/17/10/22/key-3087900__180.jpg)">
<span>Style 1</span>
</li>
<li style = "background-image:url(https://cdn.pixabay.com/photo/2018/02/16/02/03/pocket-watch-3156771__180.jpg">
<span>Style 2</span>
</li>
<li style = "background-image:url(https://cdn.pixabay.com/photo/2018/04/20/02/47/hong-kong-3334945__180.jpg)">
<span>Style 2</span>
</li>
<li style = "background-image:url(https://cdn.pixabay.com/photo/2018/01/17/10/22/key-3087900__180.jpg)">
<span>Style 1</span>
</li>
<li style = "background-image:url(https://cdn.pixabay.com/photo/2018/02/16/02/03/pocket-watch-3156771__180.jpg">
<span>Style 2</span>
</li>
<li style = "background-image:url(https://cdn.pixabay.com/photo/2018/04/20/02/47/hong-kong-3334945__180.jpg)">
<span>Style 2</span>
</li>
</ul>
Этот чистый CSS работает, но текст продолжает мигать как сумасшедший при наведении курсора.