Jquery этот параметр для выбора ребенка не работает - PullRequest
Новая
       10

Jquery этот параметр для выбора ребенка не работает

0 голосов
/ 07 сентября 2018

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

  $(".img_staff").mouseover(function() {
    alert(2);
    $(this).find('.staffimg:first-child').css("display","none");
    $(this).find('.staffimg:nth-child(2)').css("display","block");
    alert(3);
  });

Оба предупреждения работают нормально, только две промежуточные строки не работают.я хочу добиться этого эффекта, как на странице контактов сайта moca tucson https://moca -tucson.org / contact / Я пытаюсь воссоздать тот же эффект, используя Jquery

1 Ответ

0 голосов
/ 07 сентября 2018

Помимо изменения изображения, предоставленная вами ссылка также использует CSS-переходы , чтобы создать эффект "перехода изображения".

Вот аналогичный эффект только с CSS, без JavaScript..

HTML: 

<div>
    <img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_001-800x800.jpg">
    <img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_002-800x800.jpg">
</div>

CSS: 

div img:last-child { opacity: 0 }
div:hover img:first-child { opacity: 0 }
div:hover img:last-child { opacity: 1 }
img {
    position: absolute;
    transition: 0.3s;
}
...