JQuery菜单声音播放悬停

我有一个菜单在右侧，当盘旋时，我想要这个点击声音播放。但我不明白这将如何启用。JQuery菜单声音播放悬停

我使用一个无序列表，并且li有链接到页面的链接。

这就是我到目前为止。

的index.html

<html> 
<head> 
<title>Simple Learning Project</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#navigation').append('<div id="libg"></div>'); 

    var posTop, liW, liH; 
    $('#nav li a').hover(function(){ 

    posTop = $(this).offset().top; 

    liW = $(this).parent('li').outerWidth(); 
    liH = $(this).parent('li').height(); 

    $('#libg').css({top: posTop+'px', height: liH }).stop().animate({width: liW+'px', opacity: '1'}, 500); 
     },function(){ 
    $('#libg').stop().animate({width: '0px', opacity: '0'}, 0); 
    }); 

    var navhover = $('#nav li a'); 
    var navaudio = navhover.find('audio')[0]; 

    navhover.hover(function(){ 
     navaudio.play(); 
    }, function(){ 
     navaudio.stop(); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="download"> 
     <a href="jquery-flash-like-menu.zip">Download Source!</a> 
    </div> 
    <div id="navigation"> 
     <ul id="nav"> 
      <audio src="sounds/click.mp3" preload="auto"></audio> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Software</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Forum</a></li> 
     </ul> 
    </div> 
</body> 
</html>

的style.css

body { 
    background-color:#222;} 

a { 
    transition:all 200ms ease-in-out 0s; 
    -webkit-transition:all 200ms ease-in-out 0s; 
    -moz-transition:all 200ms ease-in-out 0s; 
    -o-transition:all 200ms ease-in-out 0s;} 

div#download a { 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    width:auto; 
    height:auto; 
    color:#555; 
    text-decoration:none; 
    padding:0px 5px 5px 0px;} 

div#download a:hover { 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    width:auto; 
    height:auto; 
    color:#FFF;} 

div#navigation { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:200px; 
    height:100%; 
    background-color:#333; 
    box-shadow:0px 0px 16px #000;} 

ul#nav { 
    position:absolute; 
    top:30%; 
    width:80%; 
    height:auto; 
    font-size:16px; 
    font-family:times new roman; 
    list-style:none outside none; 
    margin:-auto; 
    z-index:1;} 

ul#nav li { 
    /* background color applied by libg */ 
    color:#FFF; 
    border-bottom:1px solid #333; 
    padding:0px 0px 0px 20px; 
    margin:0px 0px 5px -40px;} 

ul#nav li a { 
    color:#999; 
    text-decoration:none;} 

ul#nav li a:hover { 
    color:#FFF;} 

/* nav li bg */ 
#libg{ 
    position:absolute; 
    left:0px; 
    width:0px; 
    background:#666; 
    z-index:0; 
    opacity:0; 
    -moz-opacity:0.0;}

太大的帮助将不胜感激。

来源

2011-07-24 Michael Schwartz

JQuery菜单声音播放悬停

回答

相关问题