jQuery懸停功能無法正常工作

Question

所以我只是想做一個簡單的jquery效果，但是.hover函數的第二部分有問題。 這是代碼：

<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>

懸停的第一部分起作用，並且高亮顯示圖像，但是當我移開圖像時，什么也沒有發生。

Answer 1

嗯，您換回的是同樣的圖像...

其次，為什么要使用jQuery來實現這種懸停效果？ 您可以使用a：hover {}和純CSS輕松完成此操作。

Answer 2

我認為你有一個錯字-你對事件mouseleave是一樣的一個mouseenter 。 這是你的意思嗎？

<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>

但是，如果您要做的只是更改圖像，則可能要考慮使用CSS。