[英]jQuery hover function not working correctly
So I'm just trying to do a simple jquery effect but am having issues with the second part of the .hover
function. 所以我只是想做一个简单的jquery效果,但是
.hover
函数的第二部分有问题。 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. 悬停的第一部分起作用,并且高亮显示图像,但是当我移开图像时,什么也没有发生。
Ehm, its the same IMAGE you replace back... 嗯,您换回的是同样的图像...
Secondly why use jQuery for such a hover effect? 其次,为什么要使用jQuery来实现这种悬停效果? You can easily do this with a:hover {} and pure CSS.
您可以使用a:hover {}和纯CSS轻松完成此操作。
I think you have a typo — your event for mouseleave
is the same as the one for mouseenter
. 我认为你有一个错字-你对事件
mouseleave
是一样的一个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. 但是,如果您要做的只是更改图像,则可能要考虑使用CSS。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.