鼠标悬停不起作用 [英] mouseover not working

问题描述

我有以下不起作用的代码
我在弹出窗口上创建此div，通常在弹出窗口上将有20个这样的div.
我正在尝试mouseover其不起作用，如果我在div本身中给出了mousover事件，则它正在起作用.
任何错误.

I have the following code which is not working
I create this div over a popup , normally there will be 20 divs like this on a popup.
i am trying mouseover its not working , if i give mousover event in the div itself its working.
any mistake.

<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")
});

推荐答案

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

Your hover function is fine but you need to wrap it in a $(document).ready() function.

我相信您正在尝试在DOM完成加载之前运行脚本.使用$(document).ready()等待DOM完成加载，然后再执行其内容.这是对该函数的引用 jQuery .ready()

I believe you are trying to run the script before the DOM has finished loading. Using $(document).ready() waits until the DOM is finished loading before executing its contents. Here is a reference to that function jQuery .ready()

另外，您还应该记住关闭图像标签

Also you should remember to close your image tags

<img src="someimage" >是无效的HTML

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

此外，您还应该记住结束javascript声明.以下行未终止.

Also you should remember to end your javascript statments. The following line was not terminated.

alert("mouseout") 

应该是

alert("mouseout");

注意最后的分号

这是一个有效的演示 已编辑

在您单击方向箭头之前，似乎没有实际填充您的元素.您可能想尝试使用live()或委托().基本上，这两个Jquery方法允许您绑定到将来的DOM元素(使用代码插入的元素，例如AJAX，动态创建的元素).我知道这种答案已经为您发布，但是我真的没有更多时间调试整个页面来解决问题.对于无法提供更好的答案，我深表歉意，但也许您可以只对具有相同功能的一张图片进行一次小型测试，然后尝试进行这种调试.

It seems your elements are not actually populated until you click on the directional arrow. You may want to try using live() or delegate(). basically these two Jquery Methods allow you to bind to future DOM element (elements that inserted using code ie AJAX, Dynamically Created Element). I know this type of answer was already posted for you but I really dont have any more time to debug your entire page for issues. I appologize for not providing a better answer but perhaps you can create a small test of just one image with the same features and try to debug that way.

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

这篇关于鼠标悬停不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！