3

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

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

请在以下位置查看演示： 演示链接

4

6 回答 6

3

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

单个图像元素

您应该为每个图标使用一个元素，并在触发 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");
 });

工作小提琴：DEMO

使用 CSS 精灵更新

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

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

工作小提琴：DEMO

于 2012-04-18T22:58:48.367 回答
1

您可以尝试使用悬停进行初始更改，然后单击更改类或图像源。

于 2012-04-18T22:53:55.017 回答
1

发生这种情况是因为您在隐藏的项目上使用鼠标事件，因此当您移动得足够快时，该项目不会触发 mouseout 事件。

我稍微修改了您的原始代码以使其工作，但是，您应该考虑废弃两个图像标签并使用 jQuery 在两个图像 src 属性值或 CSS 之间进行交换，或者使用纯 CSS 和 :hover 选择器。

http://jsfiddle.net/MATMD/

于 2012-04-18T23:04:30.797 回答
1

您可以只使用 css 并为每个 JavaScript 添加 css-classes 来执行此操作。

我更新了您的小提琴以向您展示，这将显着减少所需的 JavaScript 代码。我保留了您现有的标记，尽管我认为这也可以用更少的标记来完成：

http://jsfiddle.net/3YBe4/12/

于 2012-04-18T23:08:49.187 回答
1

如果您快速移动鼠标，则您没有给 .side_left_hover 元素足够的时间来开始监听鼠标。

那么如何解决呢？我会将所有鼠标侦听器放在 .side_left/.side_left_hover 容器 div 中。这也将使您的代码更简单、更清晰。

这是小提琴：http: //jsfiddle.net/rJK3R/1/

于 2012-04-18T23:13:54.930 回答
1

jsFiddle 演示

  • 我使用了 .on() 方法并列出了所需的鼠标事件。
  • 您可以附加一个事件处理程序(e)并检查它在函数内的类型。

.

$('img.side_left').parent('div').on('mouseenter mouseleave click', function(e){
    if(e.type === 'mouseenter' || e.type==='mouseleave'){
        $(this).find('img:not(.active)').toggle();
    }else{ // IS CLICK
        $('img.active').toggle().removeClass('active');                
        $(this).find('img').addClass('active');
    }
});
于 2012-04-18T23:39:53.530 回答