鼠标悬停时更改背景的菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style1.css">
 
</head>
<body>
<div>
<ul>
<li class="menuHeader about">
<a href="http://google.com">google</a>
</li>
<li class="menuHeader products">
<a href="http://google.com">yahooo</a>
</li>
<li class="menuHeader tech">
<a href="http://google.com">bing</a>
</li>
</ul>
</div>
 
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li.menuHeader").css("opacity",0.5);
$("li.menuHeader").hover(function(){
$(this).stop().animate({opacity:1},'slow');
},function(){
$(this).stop().animate({opacity:0.5},'slow');
});
});
 
 
 
</script>
</body>
</html>
styel1.css
@CHARSET "UTF-8";
ul
     {
          list-style:none;
          margin:0;
          paddign:0;
}
li.menuHeader{
     border:1px solid #fff;
     cursor:pointer;
     float:left;
     padding:5px 10px;
     text-align:center;
     width:120px;
}

a{
     color:#fff;
    
}
.about{
     background-image:url(01.png);
}
.products{
     background-image:url(01.png);
}.tech{
     background-image:url(01.png);
}
posted @ 2014-03-31 17:44  wint  Views(150)  Comments(0)    收藏  举报