[英]How do I change the size of an individual image with jquery on rollover?
[英]Jquery - How do I fix this Image Rollover?
嗨大家我有这个小Jquery脚本: 链接文本
$(document).ready(function()
{
$('#image p').hide();
$('img').hover(function()
{
$('#image p').show(200);
}, function()
{
$('#image p').hide(200);
});
});
我工作得很好,但我希望能够将鼠标悬停在图像中的文本上,每次尝试时,它都会“保持弹跳”
任何帮助都非常感谢,谢谢,基思
好问题。
问题似乎是当鼠标在段落上时,鼠标不再在图像上方。 所以段落是隐藏的。 当段落被隐藏时,鼠标再次位于图像上方,因此再次显示该段落。 等等...
一个好的解决方案是使用mouseenter和mouseleave事件而不是mouseover和mouseout:
$(document).ready(function(){
$('#image p').hide();
$('#image').bind("mouseenter", (function(){
$('#image p').show(200)
}));
$('#image').bind("mouseleave", (function(){
$('#image p').hide(200)
}));
});
mouseenter / mouseleave事件与mouseover / mouseout事件之间的主要区别在于前者不会冒泡。
在此示例中,div#image的子段仍然接收mouseenter / mouseleave事件(即使您没有监听它们),但事件不会冒泡到其父元素。 有关它的详细讨论,请参阅此页面 。
您还必须不再将事件分配给img标记,而是分配给包含div。 这应该不是问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.