jquery 只在 Debug模式下工作

Question

我有一个非常简单的 jQuery 代码片段。

看起来像这样:

$(document).ready(function() {                
   jQuery('.mh_img_box2').closest('.mh_img_box1').hover(function () {
       console.log("click");
       jQuery(this).find('.sp_product-note, .sp_product-note2 ').show();
       jQuery(this).addClass('hover-image');
       console.log("click");
   })

   jQuery('.mh_img_box2').closest('.mh_img_box1').mouseleave(function (){
       jQuery('.sp_product-note, .sp_product-note2').hide();
       jQuery(this).removeClass('hover-image');
   })
});

使用这段代码，我只想在鼠标悬停在相应元素上时显示悬停文本。

不幸的是，它只能在 Debug模式下工作。

您可以在此处查看该站点:

http://v4.machhoerndl-kaffee.de/sw/

感谢您的帮助。

Answer 1

您需要将代码压缩到单个 hover 事件处理程序代码中，如下所示:-

$(document).ready(function(){
    $('.mh_img_box1').hover(function () {
        $(this).find('.sp_product-note, .sp_product-note2 ').show();
        $(this).addClass('hover-image');
    },function(){
        $(this).find('.sp_product-note, .sp_product-note2 ').hide();
        $(this).removeClass('hover-image');
    });
});

注意:- 我已经在您的网站上检查了这段代码

1.在控制台中添加代码以检查:- https://prnt.sc/j52qtx

2.现在我将鼠标悬停在框上:- https://prnt.sc/j52r45

3.现在，当我将鼠标悬停在框外时:- https://prnt.sc/j52rae