JQuery菜单声音播放hover

我右边有一个菜单，当我盘旋时我想要点击这个咔嗒声。 但是我不明白这是如何启用的。

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

这是我到目前为止所得到的。

的index.html

      $(document).ready(function(){ $('#navigation').append('
'); 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(); }); });    
 Download Source! 
 
 
  
Home
 
About
 
Software
 
Contact
 
Forum
 
 
   

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;} 

非常感谢很多帮助。

Answer 1

我认为这对你有用http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-html-5-audio-element/或http://css-tricks.com/ 8954-播放声音的hover/