image.Advice上的jQuery鼠标悬停事件？答案

【问题标题】：jQuery mouseover event on image.Advice?image.Advice上的jQuery鼠标悬停事件？
【发布时间】：2011-02-02 12:57:57
【问题描述】：

我是 jQuery 新手。我正在尝试将 mouseover 事件添加到更改图像的图像和将图像设置回原始图像的 mouseout 事件。

我有一张图片

<div id="enter">
    <img src="images/entersite.png"/>
</div>

还有一些 jQuery 代码

$("#enter").mouseover(function(){
  $("#enter").html("<img src='images/entersitehover.png'/>");
});
$("#enter").mouseout(function(){
  $("#enter").html("<img src='images/entersite.png'/>");
});

我想将事件添加到图像元素而不是 div。我正在阅读类似$(:last:image) 的内容来选择最后一张图片（因为这是我认为可行的最后一张图片）。

任何帮助都会很棒？

或者，如果你能指出一个体面的教程，我会自己学习？

【问题讨论】：

你可以像@lonesomeday 回答的那样做，但是如果你想要一个简单的鼠标悬停/移出图像更改，我建议你使用纯 CSS（例如#element:hover {}）而不是 javascript ，它要快得多（参见：stackoverflow.com/questions/175385/…）
@egyedg：这是一个很好的评论。我使用 jquery 的唯一原因是因为我以前从未使用过它。

标签： javascript jquery html events

【解决方案1】：

您可以使用hover 函数非常简单地做到这一点，该函数有两个参数：一个函数用于mouseenter，一个用于mouseleave。您还可以使用后代选择器选择 #enter 中的 img 元素。

最后你可以直接设置img元素的src属性。

$('#enter img').hover(function(){
    this.src = "images/entersitehover.png";
}, function(){
    this.src = "images/entersite.png";
});

【讨论】：

谢谢。你知道有什么好的教程/api吗？我很想了解更多。