jquery 更改悬停时的背景图像
我有几个要为其生成 css 背景图像的 div。它们会在悬停时发生变化。是的，我知道我可以轻松地在 css 中完成此操作，但需要在 jquery 中完成。
代码：
$(document).ready(function() {
$('.hoverBox').css('background', 'url(img/box' + id + '.jpg)')
$('.hoverBox').hover(function(){
$(this).css('background', 'url(img/box' + this.id + '_back.jpg)')
},
function(){
$(this).css('background', 'url(img/box' + this.id + '.jpg)')
});
});
HTML 是这样的：
<div class="hoverBox" id="benefits">
content</div>
<div class="hoverBox" id="installation">
content</div>
<div class="hoverBox" id="shoponline">
content</div>
这应该很容易，但我似乎无法使它工作。
非常感谢您的帮助！ TIA。
I have several divs that I want to generate css background images for. They will change on hover. Yes, I'm aware that I could easily do this in css, but it needs to be done in jquery.
Code:
$(document).ready(function() {
$('.hoverBox').css('background', 'url(img/box' + id + '.jpg)')
$('.hoverBox').hover(function(){
$(this).css('background', 'url(img/box' + this.id + '_back.jpg)')
},
function(){
$(this).css('background', 'url(img/box' + this.id + '.jpg)')
});
});
HTML is like this:
<div class="hoverBox" id="benefits">
content</div>
<div class="hoverBox" id="installation">
content</div>
<div class="hoverBox" id="shoponline">
content</div>
This should be so easy, but I can't seem to make it work.
Assistance would be much appreciated! TIA.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
id 是什么？
是在其他地方定义的一些神秘变量还是您认为从选择器中读取 id 是某种神奇的方式？
我猜你想使用each()来获取id。
What is the id?
Is it some mysterious variable defined somewhere else or do you think the id will be read from the selector is some magical way?
I am guessing you want to use each() to get the id.