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来实现这样的悬停效果呢？您可以使用：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。

jQuery悬停功能无法正常工作

2 个答案: