Question

You can check this website I am creating:

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

If you hover over “PRECIO” it changes the ball image, but when on mouse out, I want the image of the full ball to be restored and I can´t do it.

This is the 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>

Thanks in advance!

Answer 1

this works:

$(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");
        });
    });

important – remove this:

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

    });
});

</script>