悬停/鼠标悬停时可以播放音频,而没有jQuery可以吗?

时间:2018-12-03 23:34:18

标签: javascript jquery html audio hover

我只是将这段代码放在一起,以便在悬停时播放音频..在测试页上,尝试将其合并到网站的其余部分中,但是jQuery与其他jQuery发生了冲突,并且在这一点上,noconflict模式非常漂亮巨大的工作。是否可以仅使用javascript执行以下操作?

<audio id="whiterose"  preload="auto">
                <source src="//sarahboulton.co.uk/audio/white-rose.mp3"></source>
                <source src="//sarahboulton.co.uk/audio/white-rose.ogg"></source>
</audio>


<div class="whiterose">

<a href="http://sarahboulton.co.uk">white rose?</a>

</div>

<script>

//change audio 1 to audio 2.. 3 .. etc

var audioOne = $("#whiterose")[0];
$(".whiterose a")
    .mouseenter(function() {
        audioOne.play();
    });


</script>

http://sarahboulton.co.uk/audio.html#

谢谢!

1 个答案:

答案 0 :(得分:1)

<audio id="audio"  preload="auto" src="http://sarahboulton.co.uk/audio/white-rose.mp3"></audio>
<div id="test" style="background-color:red;" class="whiterose">
    <a href="http://sarahboulton.co.uk">white rose?</a>
</div>

<script>
var test = document.getElementById("test");
test.addEventListener("mouseover", function( event ) {   
    var audio = document.getElementById("audio");
    audio.play();
}, false);
</script>