jQuery – 在hover时更改图像src

基本上我想在hover时将图像src更改为add -active.png

所以fb.png在hover时会变成fb-active.png,而在没有hover时变成fb.png。

我不太确定我做错了什么,所以到目前为止我会发布我的代码: –

HTML

  
Company - Facebook Company - Twitter Company - LinkedIn Company - Word Press

jQuery的

 $(document).ready(function() { $(function(){ var regexactive = /-active\..*$/; var ct = $('#main-social'); var imgs = $('.img-social img', ct); function activateImage(imgs){ imgs.each(function(){ var img = $(this); var src = img.attr('src'); if( !regexactive.test(src) ){ img.attr('src', src.replace('.png', '-active.png')) } }); } ct.on('hover', '.img-social', function(){ var img = $('.img-social img'); activateImage(img); }); }); }); 

这可以在没有javascript的情况下完成,只有css。 像这样:

为facebook, tw或twitter等fb图标提供不同的类。

HTML:

 

CSS:

 .img-social{display:inline-block;height:20px;width:20px;} .fb{background:url("images/fb.png");} .fb:hover{background:url("images/fb-active.png");} .tw{background:url("images/twitter.png");} .tw:hover{background:url("images/twitter-active.png");} .ln{background:url("images/linkedin.png");} .ln:hover{background:url("images/linkedin-active.png");} .wp{background:url("images/wordpress.png");} .wp:hover{background:url("images/wordpress-active.png");} 

您可以使用精灵来提高效率。

如果您不需要与旧浏览器兼容,则可以在CSS中执行此操作。

要在jquery中执行此操作,您可以尝试这样的事情:

 $(".img-social").hover(function(){ $(this).attr("src", function(index, attr){ return attr.replace(".png", "-active.png"); }); }, function(){ $(this).attr("src", function(index, attr){ return attr.replace("-active.png", ".png"); }); }); 

您可以使用mouseenter,mouseleavefunction。

    

我使用这个脚本..基于上面的脚本…它只是在活动和原始图像之间切换。

 $("document").ready(function(){ $(".my_image").mouseenter(function(){ $(this).attr('src',function(index, attr){ return attr.replace(".png", "-active.png"); }); }); $(".my_image").mouseleave(function(){ $(this).attr('src',function(index, attr){ return attr.replace("-active.png",".png");}); }); }); 

有很多方法可以做到这一点。 最简单的方法之一是将两个状态放在同一图像中,然后在hover时更改背景位置。 这样就没有额外的等待hover图像加载它已经存在。

  

CSS

 #main-social a { width: 50px; height: 50px; display: inline-block; text-indent:-1000px; overflow:hidden; background-position: left top; } #main-social a.fb { background-image: url('fb.png'); } #main-social a.tw { background-image: url('tw.png'); } #main-social a.li { background-image: url('li.png'); } #main-social a.wp { background-image: url('wp.png'); } #main-social a:hover, #main-social a.active { background-position: left bottom!important; } 

演示JSFiddle