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.

BerggreenDK · Accepted Answer · 2011-03-21 00:31:20Z

5

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.

answered Mar 21, 2011 at 0:31

BerggreenDK

5,02510 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Msencenb Over a year ago

Sometimes I amaze myself with my smart typing abilities. Also I had thought that the pseudo class hover had some issues with IE7 but upon exploring more it doesn't look like it so thanks for that also

Jon Gauthier · Accepted Answer · 2011-03-21 00:34:18Z

0

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.

answered Mar 21, 2011 at 0:34

Jon Gauthier

25.7k6 gold badges66 silver badges69 bronze badges

Collectives™ on Stack Overflow

jQuery hover function not working correctly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related