代码之家 › 专栏 › 技术社区 › kobe

鼠标悬停不起作用

jquery

kobe · 技术社区 · 14 年前

我在弹出菜单上创建这个div,通常弹出菜单上会有20个这样的div。
我正在尝试mousover它不工作,如果我给mousover事件在div本身它的工作。

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

2 回复 | 直到 14 年前

John Hartsock 14 年前

你的悬停功能很好,但是你需要用 $(document).ready()

我相信您正在尝试在DOM完成加载之前运行脚本。使用 $(文档).ready() 在执行其内容之前,等待DOM完成加载。这里有一个函数的引用 jQuery .ready()

你还应该记得关闭你的图像标签

<img src="someimage" >

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

此外,还应该记住结束javascript语句。以下行未终止。

alert("mouseout")

应该是

alert("mouseout");

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

编辑

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

Marko 14 年前

更新 <img> <img src=".."> 你应该写信 <img src="..." />

使用jQuery的 live() 方法

说明:

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

或者当您创建 < ,直接分配单击事件 (这可能是更好的方法)