Нужна помощь в решении проблемы jQuery с таргетингом на элемент c в структуре

Question

У меня есть базовая c настройка, которая работает, но по одной проблеме, с которой я борюсь.

У меня есть несколько видео (использующих только 2 для тестирования), которые при наведении каждого будут воспроизводиться , Все идет нормально. У меня также есть оверлей div с кнопкой воспроизведения (.tnplay), который должен быть скрыт при наведении курсора. Проблема в том, как я пытаюсь скрыть div.tnplay на ролловере. Мне нужно спрятать только одно на целевом видео, и сейчас все скрыты, поскольку они одного класса.

Как бы я go сказал о таргетинге только на div .tnplay, связанный со спецификацией? c видео? Это jQuery, с которым я борюсь:

var tn = $(".tnplay");
var v = $(".thevideo");
//check if video is ready to play
$(v).on('canplay', function() {
  $(v).mouseenter(function() {
    $(this).get(0).play();
    $(tn).hide();
  })
  .mouseleave(function(){
    $(this).get(0).pause();
    $(tn).show();
    $(this).get(0).currentTime=0;
  })
});

Вот мой рабочий пример: https://codepen.io/darksoundlab/pen/XWJZeRX

Спасибо за любую помощь. Вы все великолепны!

Answer 1

Это происходит потому, что вы выбираете все элементы и запускаете скрытие и отображение для каждого элемента, используя JS.

Я рекомендую использовать CSS вместо JS, чтобы показать и скрыть Наложение:

Javascript:

var tn = $(".tnplay");
var v = $(".thevideo");
//check if video is ready to play
$(v).on('canplay', function() {
  $(tn).mouseenter(function() {
    $(this).get(0).play();
  })
  .mouseleave(function(){
    $(this).get(0).pause();
    $(this).get(0).currentTime=0;
  })
});

CSS:

.tnplay {
  visibility: hidden;
}

.tnplay:hover {
  visibility: visible;
}

И функция воспроизведения / паузы зависит от наведения на оверлей, а не от видео (наложение будет захватывать событие вместо самого видео)

Также вы можете добавить анимацию CSS для перехода.

Answer 2

Это более быстрое и быстрое решение, поскольку оно найдет только ближайший класс "tnplay" и скроет его.

var tn = $(".tnplay");
var v = $(".thevideo");
//check if video is ready to play
$(v).on('canplay', function(){
  $(v).mouseenter(function(){
   //select only one tnplay
      $(this).get(0).play();
      $(this).closest('.vidwrapper').find('.tnplay').hide();
     }).mouseleave(function(){
      $(this).get(0).pause();
      $(tn).show();
     $(this).get(0).currentTime=0;
   })
});

Answer 3

Вы можете заменить эту строку кода:

$(tn).hide();

следующим:

$(this).parents(".vidwrapper").find(".tnplay").hide();