鼠标悬停不起作用

我有以下代码不起作用
我在弹出窗口中创建了这个div，通常会在弹出窗口中显示20个div。
我正在尝试mouseover它不工作，如果我在div本身的工作mousover事件。
有任何错误。鼠标悬停不起作用

<div dataindex="0" class="clstImages" id="dlstImages0"><img alt="Almond Branches in Bloom, San Remy, c.1890" title="Almond Branches in Bloom, San Remy, c.1890" src="http://imagecache5d.art.com/CropHandler/crop.jpg?img=21-2107-SA3ED00Z&amp;x=0&amp;y=0&amp;w=400&amp;h=400&amp;size=2&amp;maxw=100&amp;maxh=100&amp;mode=sq&amp;q=100" id="eachimg"> 
</div>

$('.clstImages img').hover(function() { 
    alert("mouseover"); 
}, function() { 
    alert("mouseout") 
});

来源

2010-10-22 kobe

创建的div（图像）的内容是动态的吗？ – 2010-10-22 23:33:29

它的动态，每个弹出框共有20个div，图像位于上面的div内。 – kobe 2010-10-23 02:34:05

任何想法，为什么它不工作 – kobe 2010-10-23 04:29:46

您的悬停功能很好，但您需要将其包装在$(document).ready()函数中。

我相信你正试图在DOM完成加载之前运行脚本。在执行其内容之前，使用$(document).ready()等待DOM完成加载。下面是该函数jQuery .ready()

你也应该记住关闭图像标记

<img src="someimage" >参考无效HTML

<img src="someimage" />是有效的HTML

你也应该记住，结束您的JavaScript statments。以下行未被终止。

alert("mouseout")

应该

alert("mouseout");

注意分号末

下面是一个工作demo http://www.jsfiddle.net/R7KmW/

编辑

看起来你的元素没有实际填充，直到你点击方向箭头。你可能想尝试使用live（）或delegate（）。基本上这两个Jquery方法允许你绑定到未来的DOM元素（使用代码插入的元素，即AJAX，动态创建元素）。我知道这种类型的答案已经发布给你，但我真的没有更多的时间来调试你的整个页面的问题。我很抱歉没有提供更好的答案，但也许您可以创建一个具有相同功能的图像的小测试，然后尝试以这种方式进行调试。

$(document).ready(function() { 
    $('.clstImages img').live('mouseover', function() { 
     alert("mouseover"); 
    }) 
    .live('mouseout', function() { 
     alert("mouseout"); 
    }); 
});

来源

2010-10-23 06:02:25

正确，但不需要在最后一个语句中使用分号。 JS Minifers实际上删除了这些:)另外，我推测它已经在'$（document）.ready（）'里面了，因为他已经成功创建了工具提示。 – Marko 2010-10-23 06:04:24

@Marco你在分号上的权利..但是为了安全起见，如果你在开发中修改你的代码并且在缺少分号后留下一行，那么安全的做法是始终放分号。准备好发布代码时，请缩小或隐藏JavaScript以缩小文件的大小。但是，当文件用于开发时，我总是尝试遵循推荐的语法，而不是缩小或隐藏。 – 2010-10-23 06:10:26

我觉得还有一些其他的问题，我的鼠标悬停功能只是在ready函数中。如果您有时间可以尝试此处的示例，请键入http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=76947CF94DBD4E59981ADAA5E7C14F65鼠标悬停在该图库页面中的任何图像，然后单击一个的方向，你会图像网格，这就是我想添加mousover事件，它不工作 – kobe 2010-10-23 06:32:20

更新 <img>标签是自闭的，而不是<img src="..">，所以你应该写<img src="..." />注意最后的斜杠。**

使用jQuery的live()方法

描述：将事件处理程序附加到与当前选择器匹配的所有元素，现在和将来。

$('.clstImages img').live("mouseenter", function() { 
    alert("mouseenter"); 
}); 
$('.clstImages img').live("mouseleave", function() { 
    alert("mouseleave"); 
});

或者当你创建<img>，分配一个click事件直接（这可能是一个更好的方法）。

来源

2010-10-22 23:41:43 Marko

或将它们结合在一个单一的绑定：'$（'selector'）。live（'mouseover mouseout'，function（event）{if（event.type =='mouseover'）{/...} else {// ...}}）;' – Alec 2010-10-22 23:52:57

这也不起作用 – kobe 2010-10-23 00:06:04

鼠标悬停不起作用

回答

相关问题