JQuery菜单悬停播放声音_Jquery_Audio_Hover_Playback

JQuery菜单悬停播放声音

jquery audio

JQuery菜单悬停播放声音,jquery,audio,hover,playback,Jquery,Audio,Hover,Playback,我在右边有一个菜单，当鼠标悬停在上面时，我想播放这个点击声音。然而，我不明白这将如何启用我使用一个无序的列表，李的有链接到页面的链接这就是我目前得到的 index.html <html> <head> <title>Simple Learning Project</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text

我在右边有一个菜单，当鼠标悬停在上面时，我想播放这个点击声音。然而，我不明白这将如何启用

我使用一个无序的列表，李的有链接到页面的链接

这就是我目前得到的

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>

非常感谢您的帮助。

我认为这将对您或您的客户非常有用

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