Question

刚学习jQuery并使用它来更改鼠标悬停事件触发的按钮上的背景图像。所有控制台输出都在正确的时间触发，但我的图像永远不会改变。没有错误被抛出。我做错了什么？

在<head>元素中，我有这个预加载脚本：

    function preloader() {
        if (document.images) {
            console.log("preloading images");
            contact_green = new Image();
            contact_green.src = "http://www.xxxx.com/images/contact_green.png";
        }
    }

    function addLoadEvent(func) {
        var oldonload = window.onload;

        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }

    addLoadEvent(preloader);

这似乎工作得很好，从某种意义上说，我得到输出“预加载图像”。但是，不确定它是否具有正确的范围。

然后，在<body>元素中，我定义了这个按钮：

    <td>
        <button id='contact' class='CXIII' onclick="btnContact()">
            <img id="logo" src="images/contact_blue.png">
        </button>
    </td>

最后，我有一个脚本应该在鼠标悬停事件时更改此按钮上的图像：

<script>

    function showHover(img) {
        console.log("show hover");
        if (img) img.src = contact_green;;
    }

    $("#contact").hover(
        function () {
            console.log("mouse in");
            showHover(this);
        },
        function () {
            console.log("mouse out");
        }
    );
</script>

我得到了控制台输出，但图像没有改变。也没有抛出任何错误。

Answer 1

您正在设置对象，而不是图像的来源

img.src = contact_green;;

需要

img.src = contact_green.src;

你没有设置图像，而是按钮。

showHover(this);

需要

showHover($(this).find("img")[0]);

因为你正在使用jQuery

$(window).load(preloader);

jQuery更改按钮图像不起作用

1 个答案: