Question

我有一个选择图像的按钮，它的默认状态是“选择图像”，选择图像后，按钮的innerHTML将更改为文件名。现在，我想要做的是，如果我将鼠标悬停在按钮上而不说“选择图像”，我希望它说“选择一个不同的图像”，然后onmouseout我希望它回到它的内容之前（图像文件名）。

我把以下内容放在一起，但它不起作用......我对JS和jQuery选项持开放态度。

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    if (btn.innerHTML !== "Select Image") {
        var temp = btn.innerHTML;
        btn.onmouseover = btn.innerHTML = "Select a different image";
        btn.onmouseout = btn.innerHTML = temp;
    }
});

解决方案 - 感谢Ian

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    btn.onmouseover = function () {
        if (this.innerHTML !== "Select Image") {
            var temp = this.innerHTML;
            this.innerHTML = "Select a different image";
        }
    };

    btn.onmouseout = function () {
        if (this.innerHTML !== "Select Image") {
            this.innerHTML = temp;
        }
    };
});

Answer 1

试试这个：

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    if (btn.innerHTML !== "Select Image") {
        var temp = btn.innerHTML;
        btn.onmouseover = function () {
            this.innerHTML = "Select a different image";
        };

        btn.onmouseout = function () {
            this.innerHTML = temp;
        };
    }
});

您需要将.onmouseover和.onmouseout属性设置为函数。然后，您也可以使用this而不是btn来引用该按钮。

<强>更新

我想你想把你的逻辑重新排列成这样的东西：

window.addEventListener('load', function(event) {
    var btn = document.getElementById('file-button');
    var temp = btn.innerHTML;
    btn.onmouseover = function () {
        if (this.innerHTML !== "Select Image") {
            temp = this.innerHTML;
            this.innerHTML = "Select a different image";
        }
    };

    btn.onmouseout = function () {
        if (this.innerHTML !== "Select Image") {
            this.innerHTML = temp;
        }
    };
});

http://jsfiddle.net/3WkXp/

Answer 2

由于您使用的是jQuery，因此可以将其写为

$(function(){
    var temp = $('#file-button').html();
    if (temp !== "Select Image") {
        $('#file-button').hover(function(){
            $(this).html('Select a different image')
        },function(){
            $(this).html(temp)
        });
    }
})

演示：Fiddle

Answer 3

尝试这个

实际上，只有在btn的html！== Select Image

时才绑定事件监听器

var temp;
$("#file-button").mouseover(function() {
    if ($(this).html() !== "Select Image")
    {
        temp = $(this).html();
        $(this).html("Select a different Image");
    }
}).mouseout(function() {
    if ($(this).html() === "Select a different Image")
        $(this).html(temp);
});

悬停时更改文字无效

3 个答案: