jQuery hover function not working correctly

Question

So I'm just trying to do a simple jquery effect but am having issues with the second part of the .hover function. Here's the code:

<div id="toprightboxes">
<ul>
    <li><div id="login"><img src="img/login.png"/></div></li>
    <li>info</li>
    </ul>
</div>
<script>
    $("#login").hover(
        function () {
            $(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
        },
        function () {
            $(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
        }
    );
</script>

The first part of the hover works and the highlight image shows up but when I move off of the image nothing happens.

Answer 1

Ehm, its the same IMAGE you replace back...

Secondly why use jQuery for such a hover effect? You can easily do this with a:hover {} and pure CSS.

Answer 2

I think you have a typo — your event for mouseleave is the same as the one for mouseenter . Is this what you meant?

<div id="toprightboxes">
<ul>
    <li><div id="login"><img src="img/login.png"/></div></li>
    <li>info</li>
    </ul>
</div>
<script>
    $("#login").hover(
        function () {
        $(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
        },
        function () {
        $(this).replaceWith('<div id="login"><img src="img/login.png"/></div>');
                }
    );
</script>

If all you're doing is changing the image, though, you might want to consider using CSS instead.