Jquery改变按钮链接a的hover背景
考虑到有很多的不同的按钮图片，用:hover属性需要每个都定义，太麻烦，所以写个了js来自己换图片
1 $(document).ready(function(){ 2 var str ; //全局变量，存储原来图片的src 3 $("div.autohover a").mouseover( 4 function() 5 { 6 str = $("img",this).attr("src"); 7 var hover_str = getHoverImg(str); 8 //alert(hover_str); 9 $("img",this).attr("src",hover_str); 10 }); 11 $("div a").mouseout( 12 function() 13 { 14 $("img",this).attr("src",str); 15 }); 16 17 }); 18 19 //核心函数 20 function getHoverImg(str) 21 { 22 //var fileNameStart = str.lastIndexOf("/");//先不取文件名 23 var fileNameEndPos = str.lastIndexOf("."); 24 //substr() : 第一个参数是起始位置，第二个参数是长度 25 var fileName = str.substr(fileNameStart + 1,fileNameEndPos-fileNameStart-1); 26 var extName = str.substr(fileNameEndPos,4); 27 28 //整个路径名 29 var filePath = str.substr(0,fileNameEndPos); 30 //重新组合成hover时的图片名，为a标签定义hover属性 31 var hover_ex = "_hover" 32 var hoverFileName = filePath + hover_ex + extName; 33 return hoverFileName ; 34 35 }
这样可以将图片导航做成一个模块，用一个div包住，当然如果导航里没有其他的a标签，可以直接用nav标签 用法很简单：（这里是photoshop生成的div+css网页，所以乱了点，所以才会这样来做hover属性●︿●）
1 <div class="autohover"> 2 <div class="nq3_"> 3 <a href="http://www.cnblogs.com/trying/admin/info.html"><img id="nq3" src="http://www.cnblogs.com/trying/admin/images/nq3.jpg" alt="" width="94" height="94" border="0" /></a> 4 </div> 5 <div class="nq5_"> 6 <a href="http://www.cnblogs.com/trying/admin/360View.html"><img id="nq5" src="http://www.cnblogs.com/trying/admin/images/nq5.jpg" alt="" width="93" height="94" border="0" /></a> 7 </div> 8 9 </div>
1 /** 2 * imghover_v2.js 3 * 这个是为css-sprite设计的hover变换 4 * 为导航容器加上class="hoverImg" 5 **/ 6 7 $(document).ready(function(){ 8 var str ; //全局变量，存储原来图片的src 9 $(".hoverImg a").mouseover( 10 function() 11 { 12 str = $(this).css("background-image"); 13 var hover_str = getHoverImg(str); 14 var hover_str = hover_str+")"; //做点处理 15 //alert(hover_str); 16 $(this).css("background-image",hover_str); 17 }); 18 $("div a").mouseout( 19 function() 20 { 21 $(this).css("background-image",str); 22 }); 23 24 });
