mouseenter 和 mouseleave 在 jquery 中不起作用答案

【问题标题】：mouseenter and mouseleave dont work in jquerymouseenter 和 mouseleave 在 jquery 中不起作用
【发布时间】：2015-01-04 20:28:59
【问题描述】：

我正在测试我的网站，添加一些 jQuery 交互。我创建了这个脚本：

$(document).ready(function() {
    $('.flash').on({
        mouseenter: function (
            $('.flash').hide();
    },
    mouseleave: function  {
        $('.flashOn').show();
    }
});

非常简单地触发闪光灯：http://www.paolobergomi.it/sitob/index.html 但实际上我不知道为什么不工作。我调试了很多，但都是一样的。如您所见，该 div 已正确放置在 HTML 中，脚本没问题（我认为），但它不起作用，欢迎提供任何线索。

【问题讨论】：

标签： jquery image mouseenter mouseleave

【解决方案1】：

当您使用正确的语法时，mouseenter 和 mouseleave 在 jQuery 中工作正常：

$('.flash').on({
    mouseenter: function() {
        $('.flashOn').hide();
    },
    mouseleave: function() {
        $('.flashOn').show();
    }
});

Example fiddle

我还假设mouseenter 处理程序应该隐藏.flashOn 元素？

【讨论】：

同一个元素上的多个处理程序的新语法，tyvm sir
我在 css 中创建了两个类，一个不显示（flash On），基本上当我将鼠标悬停时，我希望第二个 div 中包含的图像（不显示）它会显示和隐藏“闪”课。但它无论如何都不起作用。我试过你的但不工作。还是谢谢
嗨，它有效。好的，抱歉解释不好。我希望第二张图像重叠并取代第一张，而不是在旁边……我需要解决这个问题，但你没问题。谢谢

【解决方案2】：

mouseenter 和 mouseleave 存在语法错误。

$('.flash').on({
   mouseenter: function ( // here should be (){
    $('.flashOn').hide();
   },
   mouseleave: function { // here should be (){
    $('.flashOn').show();
   }
});

【讨论】：

谢谢，很好。现在，当我写信给安德鲁时，我得到了正确的语法。我只需要稍微修改一下，让两张图片不在旁边，而是一张代替另一张。

【解决方案3】：

最终解决方案

$('.flash').on ({
    mouseenter : function (){

    $('.flash').hide();
    $('.flashOn').show();
},
   mouseleave: function  (){
    $('.flashOn').hide();
    $('.flash').show();

 }
});

感谢正确的语法，现在可以了

【讨论】：