题
嗨大家我有这个小小的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。这应该不是问题。
不隶属于 StackOverflow