gpt4 book ai didi

jquery - 关于悬停时背景图像更改的建议/帮助

转载 作者:太空宇宙 更新时间:2023-11-04 14:15:34 25 4
gpt4 key购买 nike

谁能给我推荐一个插件,它可以在悬停在不同按钮上时更改背景图像/图像?

共有三个按钮,每个按钮都有一个对应的图像。所以当我将鼠标悬停在它们上面时,这些按钮后面的图像应该会改变。我卡得很厉害!

最佳答案

这是最简单的方法:Fiddle , 它使用这个 Sprite 表: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;
}

或者,使用 Sprite 表:

#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' });
});

如果你有很多,并用数字命名图像或使用 Sprite ,你可以这样做:

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;
});

关于jquery - 关于悬停时背景图像更改的建议/帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20393151/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com