jQuery – 在hover时更改图像src
基本上我想在hover时将图像src更改为add -active.png
。
所以fb.png在hover时会变成fb-active.png,而在没有hover时变成fb.png。
我不太确定我做错了什么,所以到目前为止我会发布我的代码: –
HTML
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"); }); });
我使用这个脚本..基于上面的脚本…它只是在活动和原始图像之间切换。
$("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