Звук при наведении на изображение работает только в некоторых случаях - PullRequest
Новая
       52

Звук при наведении на изображение работает только в некоторых случаях

0 голосов
/ 24 апреля 2020

Я пытаюсь воспроизводить звук при наведении курсора. Тем не менее, я думаю, что два из моих javascript кодов конфликтуют. Мое изображение исчезает при наведении, пока пользователь не обновится. В то же время звук должен воспроизводиться. Это работает, когда я добавляю пробелы или выполняю любое редактирование на javascript, что странно, но когда я переосмыкаю sh мой кодовый блок, он снова не работает. Пожалуйста, дайте мне знать, где я иду не так. Спасибо огромное! Это моя кодовая ссылка: https://codepen.io/narutofan389/collab/rNOyaZG

Это мой HTML

<div class="sand">
    <img id="sand" src="https://i.postimg.cc/g239s44L/sand.png">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="div4"> 
    <img id="sand"     src="https://i.postimg.cc/g239s44L/sand.png" /> 
    <audio id="audio"> <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/2sec.mp3"/> 
    </audio>
</div>

<div class="sand2">
    <img id="sand2" src="https://i.postimg.cc/g239s44L/sand.png">
    </div>

<div class="sand3">
    <img id="sand3" src="https://i.postimg.cc/g239s44L/sand.png">
    </div>

<div class="sand4">
    <img id="sand4" src="https://i.postimg.cc/g239s44L/sand.png">
    </div>

Это мой javascript

document.addEventListener("DOMContentLoaded", function() {
  var img = document.getElementById("sand");

var audio = $("#audio")[0]; $("#sand").mouseenter(function() { audio.play();               
  audio.loop = true;
});
  $("#sand").mouseleave(function() { audio.pause();
});

img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});

document.addEventListener("DOMContentLoaded", function() {
  var img = document.getElementById("sand2");

  img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});

document.addEventListener("DOMContentLoaded", function() {
  var img = document.getElementById("sand3");

  img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});

document.addEventListener("DOMContentLoaded", function() {
  var img = document.getElementById("sand4");

  img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});
...