Question

您可以查看我正在创建的网站：

http://www.tinybigstudio.com/proyectos/golfycia/

如果你将鼠标悬停在“PRECIO”上，它会改变球形图像，但是当鼠标移出时，我希望恢复完整球的图像，我无法做到。

这是Javascript：

<script>
$(document).ready(function () {
    $("#secciones span").hover(function () {
        $("#golfball img").removeClass("opaque");

        var imageToShow = $(this).attr("id").replace("for-", "");
        $("#golfball #" + imageToShow).addClass("opaque");

    });
});

$(document).ready(function () {
    $("#secciones span").mouseout(function () {
        $("#image-1").addClass("opaque");

    });
});

</script>

提前致谢！

Answer 1

结合一切：

$(document).ready(function () {
    $("#secciones span").hover(function () {
        $("#golfball img").removeClass("opaque");

        var imageToShow = $(this).attr("id").replace("for-", "");
        $("#golfball #" + imageToShow).addClass("opaque");

    },function () {
        $("#image-1").removeClass("opaque");
    });
});

Answer 2

hover方法可以使用第二个参数，这是一个在mouseout上调用的函数。

Answer 3

一种简单的方法是使用toggleClass()方法：

$("#secciones span").hover( function () { $(this).toggleClass("opaque"); });

它简短而简单。只需设置高尔夫球的默认背景图像即可。并创建一个覆盖背景的新课程。当您将鼠标悬停在高尔夫球上时，使用上面的代码来打开和关闭新班级。

Answer 4

您的mouseout正在从opaque而不是#image-1删除#image-2课程

试试这个

$("#secciones span").hover(function() { // mouse over
    $('#image-2').addClass('opaque');
}, function() { // mouse out
    $('#image-2').removeClass('opaque');
});

Answer 5

这有效：

$(document).ready(function () {
        $("#secciones span").hover(function () {
            $("#golfball img").removeClass("opaque");

            var imageToShow = $(this).attr("id").replace("for-", "");
            $("#golfball #" + imageToShow).addClass("opaque");

        }, function () {
            $("#golfball #image-1").addClass("opaque");
            $("#golfball #image-2").removeClass("opaque");
        });
    });

重要 - 删除它：

<script>
$(document).ready(function() {
    $("#secciones span").mouseout(function() {
        $("#image-1").removeClass("opaque");

    });
});

</script>

JQUERY - 鼠标移出时恢复类

5 个答案: