JQUERY - Restore class on mouse out
<p>You can check this website I am creating:</p>

<p><a href="http://www.tinybigstudio.com/proyectos/golfycia/" rel="nofollow">http://www.tinybigstudio.com/proyectos/golfycia/</a></p>

<p>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.</p>

<p>This is the Javascript:</p>

<pre><code>&lt;script&gt;
$(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");

    });
});

&lt;/script&gt;
</code></pre>

<p>Thanks in advance!</p>
