Jquery背景图像改变只是使当前图像消失

Question

我真的是新的jQuery和我试图使它，所以当你悬停在某个<div> (#onefourth)的background-image的#bottomleftjunk切换到'junk1.png'。问题是当我将鼠标悬停在div上时，它只会使当前的background-image消失，而不是切换到新的background-image。

$('#onefourth').hover(
    function()
    {
        $('#bottomleftjunk').css("background-image", "url(junk1.png)");
    }, 
    function()
    {
        $('#bottomleftjunk').css("background-image", "url(junk1.png)");
    }
);

如果有人有任何想法，我真的很感激帮助，谢谢!

Answer 1

背景被删除，所以你可以肯定一件事:你的JavaScript是工作的。这意味着它几乎肯定是一个文件路径问题。在jQuery中调用css()将编辑元素的内联样式，这意味着路径必须相对于HTML文档。

以这个结构为例:

root
 |-index.html
 |
 |-scripts
 |  |-javascript.js
 |  |-css.css
 |
 |-images
 |  |-junk1.jpg
 |  |-otherimages.jpg

相对于index.html， 'junk1.jpg'的路径为:images/junk1.jpg

Answer 2

您引用的是同一图像。请修改并尝试下面的代码。

$(document).ready(function () {
                $("#onefourth").hover(function () {
                    $('#bottomleftjunk').attr("src", "junk1.jpg");
                }, function () {
                    $('#bottomleftjunk').attr("src", "junk2.jpg");
                }
                });
            });