Question

我有菜单......如下所示

我想在悬停

上发出声音效果

<ul id="menu" class="nav">
    <li>
        <a href="#">Home</a>
        <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

我想在悬停

上发出声音效果

Answer 1

我同意Rafik Malek。

<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style type="text/css">audio {display: none;}</style>
</head>
<body>
<ul id="nav-two" class="nav">
    <li>
        <a href="#">Home</a>
        <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
<script>
$("#nav-two a")
  .each(function(i) {
    if (i != 0) {
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beep", i);
  })
  .mouseenter(function() {
    $("#sound" + $(this).data("beep"))[0].play();
  });
$("#sound").attr("id", "sound0");
</script>
</body>

Answer 2

您可以使用 jQuery mouseover() OR mouseenter()开始音频，并使用 mouseleave() OR mouseout() 以禁用音频效果。

重试一次。它对我有用

Answer 3

＆＃13;

$("#nav-two a")
  .each(function(i) {
    if (i != 0) {
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beep", i);
  })
  .mouseenter(function() {
    $("#sound" + $(this).data("beep"))[0].play();
  });
$("#sound").attr("id", "sound0");

＆＃13;

audio {display: none;}

＆＃13;

<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<ul id="nav-two" class="nav">
    <li>
        <a href="#">Home</a>
        <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

</body>

＆＃13;

试试这个

<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style type="text/css">audio {display: none;}</style>
</head>
<body>
<ul id="nav-two" class="nav">
    <li>
        <a href="#">Home</a>
        <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
<script>
$("#nav-two a")
  .each(function(i) {
    if (i != 0) {
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beep", i);
  })
  .mouseenter(function() {
    $("#sound" + $(this).data("beep"))[0].play();
  });
$("#sound").attr("id", "sound0");
</script>
</body>

如何在悬停上发出声音效果

3 个答案: