Jquery 在鼠标悬停时显示 block

Question

这是 live我正在做我的事情的网站。现在，在该链接中，您可以看到一个名为 Source from Top Global Suppliers 的部分，在该部分中，您可以看到一个名为 Hot Regions 的 block 。现在当你将鼠标悬停时，你可以看到它显示了一个带有一些国家国旗的 block 。但是当你将鼠标移动到其中一个国旗时，盒子就会隐藏起来。但我希望当你将鼠标移动到那些旗帜中的任何一个仍然会在那里。我关注了this该悬停部分的网站。

我的那个 block 的 jQuery 代码是这样的

jQuery(document).ready(function() {
    jQuery('.hr-current').mouseover(function() {
      jQuery('#hot-regions').addClass('hr-hover');
    });
    jQuery('.hr-current').mouseout(function() {
      jQuery('#hot-regions').removeClass('hr-hover');
    });
  });

注意

这是 fiddle 的链接 这是 fiddle 的链接 http://jsfiddle.net/NewUserFiddle/y53WQ/ 我希望结果与引用的链接完全一样......

Answer 1

您需要在 #hot-regions 上mouseout :

jQuery('#hot-regions').mouseout(function() {
    jQuery(this).removeClass('hr-hover');
});

如果使用 mouseenter/mouseleave 而不是 mouseover/mouseout 修复它:

 jQuery(document).ready(function() {

    jQuery('.hr-current').mouseenter(function() {
      jQuery('#hot-regions').addClass('hr-hover');
    });

    jQuery('#hot-regions').mouseleave(function() {
      jQuery(this).removeClass('hr-hover');
    });

  });  

查看更新后的 fiddle .