javascript - jquery 的鼠标事件问题

Question

我创建了一个菜单并尝试使用 mouseover (mouseenter) 和 mouseout(mouseleave)，但不幸的是，如果您将鼠标移动得太快，则不会触发某些事件，并且悬停图像不会变回原始图像。

我需要使用 mouseover 和 mouseout 事件而不是悬停，因为如果单击图像，我需要显示原始图像。

请查看演示: Demo link

Answer 1

我不认为每个图标使用两个不同的图像元素是个好主意。

单个图像元素

您应该为每个图标使用一个元素，并在触发 mouseover 和 mouseout 时切换类和图像 src。

像这样(最小的例子):

 $(".side_left").mouseover(function() {
    $(this).prop("src", "http://www.spiritualawakeningradio.com/yaha.jpg");
 }).mouseout(function(){
    $(this).prop("src", "http://img.creativemark.co.uk/uploads/images/461/13461/smallImg.png");
 });

工作 fiddle :DEMO

使用 CSS sprites 更新

这是一个更好的 CSS Sprite 示例。不需要 JavaScript 和大部分标记，只需要一些 CSS:

.side_left {
    width: 60px;
    height: 60px;
    background: url('http://i.imm.io/mvRL.png');
}
.side_left:hover {
    background-position: 60px;
}

工作 fiddle :DEMO