Question

我正在使用此代码：

 { box-sizing: border-box; }
        .specific:hover { background-image: url("example.jpg"); color:white }

使用此代码我将其用于html：

div class="specific"

通过这些，我可以轻松地将鼠标悬停在一个段落上，并立即显示背景图像。但是我想要更像我将要悬停的时候，它应该播放声音（即mp3文件），当我移开光标时声音将停止播放，当我再次悬停光标时，声音应该从首先不是我离开的地方。

我看过很多类似的帖子，但那里的代码，我不能把它们放到我的文件中。

Answer 1

使用内置JS方法，属性等的HTML音频标记，您可以非常轻松地完成此操作。请参阅this page。许多人不喜欢W3Schools，但那里有很好的信息，而且很直接。使用conda install -c conda-forge dlib=19.4事件监听器并使用hover和.play()方法来完成此操作需要非常少量的JS / jQuery。

Here's a simple tutorial使用.pause()和.play()。

Answer 2

我费力地为你准备了a fiddle。但说真的，试试你自己的东西。

HTML

<div class="specific">
  Listen to some <i>music</i>...
</div>

JS

let specific = document.querySelector(".specific");
let audio = document.createElement("audio");
audio.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
document.body.appendChild(audio);

specific.onmouseover = () => {
  audio.play();
}
specific.onmouseout = () => {
    audio.pause();
}

欢迎你。

<强>更新

<小时/> 更新了小提琴：https://jsfiddle.net/dLxkhogy/21/

HTML

<div class="specific">
  <p>
    Listen to some <i>music</i>...
  </p>
</div>
<div class="specific">
  <p>
    Listen to some more music...
  </p>
</div>
<div class="specific">
  <p>
    Listen to even <i>more</i> music!
  </p>
</div>

JS

let specifics = document.querySelectorAll(".specific");

let audios = ["https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"];

for(i = 0; i < specifics.length; i++){
    let specific = specifics[i];

  let audio = document.createElement("audio");
  audio.src = audios[i];
  document.body.appendChild(audio);

  specific.onmouseover = () => {
    audio.play();
  }
  specific.onmouseout = () => {
    audio.pause();
    audio.currentTime = 0;
  }
}

如何在悬停时自动播放声音（使用div）？

2 个答案: