Jquery: скрыть и показать div, когда изображение наведено

Question

Интересно, может ли кто-нибудь помочь мне найти решение для эффекта наведения на изображение в моем блоге?Идея заключалась в том, что, когда я наведу курсор на изображение, вы увидите div с информацией об изображении, ссылкой на название проекта, дату, ...

Что я сделал, так это назначил два класса, которые делят информацию div, класс show и класс hide, и в начале он появляется с классом hide.

Затем с jQuery / JavaScript, когда img:hover удаляет класс hide и добавляет класс show.

Проблема в том, что при наведении на изображение появляется информация обо всех изображениях.

Интересно, могут ли некоторые помочь мне просто отобразить информацию об этом изображении?мышь зависла.

Мой HTML:

<div id="content">
  <img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
  <div class="information hide">
      <h2>Titulo</h2>
      <p>Lorem Ipsun</p>
      <a href="#" class="info">Read More</a>
  </div>
</div>

<div id="content">
  <img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
  <div class="information hide">
      <h2>Titulo</h2>
      <p>Lorem Ipsun</p>
      <a href="#" class="info">Read More</a>
  </div>
</div>

Мой CSS:

body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}

/ * HOVERЭФФЕКТ * /

.hide {
display: none;
}

.show {
display: block;
}

Мой JavaScript:

$('img').hover(function() {
    $('.information').addClass("mostrar");
    $('.information').removeClass("hide");      
});

И, кстати, если кто-то может сказать мне, как снова скрыть информацию, когдаизображение не парить, я ценю.

Answer 1

Как насчет чего-нибудь попроще:

$("div.content > img").hover(function() {
    $(this).next(".information").show(); //hover in
}, function() {
    $(this).next(".information").hide(); //hover out
});

Таким образом, используя jquery .show и .hide , вам не нужно использовать созданный вами CSS для эффекта наведения, поскольку функции этих jquery уже позаботятся о атрибуты.

Answer 2

Если вам не нужна поддержка IE7 и ниже, вы можете сделать это только с помощью CSS, используя соседний братский комбинатор , не требуется JavaScript:

img + div.information {
    display: none;
}
img:hover + div.information {
    display: block;
}

Там написано: «Скрыть div.information, когда сразу после img», но «Показать div.information, когда сразу после завис img».Последнее правило является более поздним в CSS и (я думаю ) более конкретным, оно выигрывает, когда изображение наведено, а не когда его нет.

Живой пример - Работает в современных браузерах, включая IE8 и выше.

Answer 3

Попробуйте это

$('img').hover(function() {
    $('.information').addClass("hide")
    $(this).next().addClass("mostrar").removeClass("hide");
}, function(){
    $('.information').addClass("hide").removeClass("mostrar")
});

Answer 4

Попробуйте это:

$('img').hover(function(){
    $(this).siblings('.information').removeClass('hide').addClass('mostrar').addClass('show');

}, function(){
    $(this).siblings('.information').removeClass('show').removeClass('mostrar').addClass('hide');
});

Answer 5

$(this).parent().find('.information').addClass("mostrar")
    .removeClass("hide");   

При этом будет получен родительский объект отдельного img, который ищется, поиск в родительском и найдет .information, специфичный для этого img.

Answer 6

проблема в том, что при наведении на изображение появляется информация обо всех изображениях.

Я полагаю, это потому, что вы ссылаетесь на общий класс информации, а неидентификатор одного div.Вместо этого используйте ссылку соседнего брата, чтобы получить только информацию для изображения, которое вы наводите.Вы можете использовать селектор: nth-child ().

$("#content:nth-child(1)")

Кроме того, у вас не должно быть нескольких div с одним и тем же идентификатором.