任何人都可以建议我一个插件,它会在悬停在不同按钮上时改变背景图像/图像吗?
每个按钮都有三个按钮和相应的图像。所以当我将鼠标悬停在它们上面时,这些按钮后面的图像应该会改变。我被困住了!
答案 0 :(得分:1)
这是最简单的方法:Fiddle,它使用此精灵表:http://i.imgur.com/wKT9VON.png
有两种方法可以做到这一点。轻量级方法是使用CSS,如下所示:
#mylink-1 {
background: transparent url('/img/my-img.png') 0 0 no-repeat;
}
#mylink-1:hover {
background: transparent url('/img/my-img-over.png') 0 0 no-repeat;
}
#mylink-2 {
background: transparent url('/img/my-img-2.png') 0 0 no-repeat;
}
#mylink-2:hover {
background: transparent url('/img/my-img-2-over.png') 0 0 no-repeat;
}
或者,使用精灵表:
#mylink-1 {
background: transparent url('/img/my-img.png') 0 0 no-repeat;
}
#mylink-1:hover {
background: transparent url('/img/my-img-over.png') 0 -20px no-repeat;
}
第二种方式是JavaScript。如果你正在使用jQuery:
$('#mylink-1').on('hover', function() {
$(this).css({ background: 'transparent url("/img/my-img-over.png") 0 0 no-repeat' });
});
如果你有很多,并用数字命名图像或使用精灵,你可以这样做:
var i = 1;
// Non-sprite
#('.mylinks').each(function() {
$(this).css({ background: "transparent url('/img/my-img-' + i +'-over.png') 0 0 no-repeat" });
i++;
});
var i = 0;
// Using sprites
#('.mylinks').each(function() {
$(this).css({ background: "transparent url('/img/my-img-over.png') 0 ' + i + 'px no-repeat" });
i -= 20;
});
答案 1 :(得分:0)
答案 2 :(得分:0)
为什么不在css中这样做?
#button1:hover
{
background: url(/image/btn1.png) no-repeat;
}
#button2:hover
{
background: url(/image/btn2.png) no-repeat;
}
#button3:hover
{
background: url(/image/btn3.png) no-repeat;
}