Question

以下是live网站，我正在处理我的工作。现在在该链接中，您可以看到该部分中有一个名为Source from Top Global Suppliers的部分，您可以看到有一个名为Hot Regions的块。现在，当你将鼠标悬停在鼠标上时，你可以看到它正在显示一个带有一些国家标志的块。但是当你将鼠标移动到其中一个标志时，框就会隐藏。但是当你将鼠标移动到鼠标时我想要它任何那些旗帜仍然在那里。我已经关注了这个悬停部分的this网站。

我该块的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');
    });
  });

注意

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

Answer 1

您需要mouseout上的#hot-regions：

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。

Answer 2

直播demo

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

Answer 3

一些事情......

首先，使用.mouseenter()和.mouseleave()而不是.mouseover()和.mouseout()。

接下来，从您的jsfiddle示例中删除以下内容：

CSS：

.hr-hover .hr-current {
    margin-top: 0;
}

最后，使用以下内容：

JAVASCRIPT：

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

样本： http://jsfiddle.net/y53WQ/10/

希望这有帮助，如果您有任何问题，请与我联系。

Answer 4

您可以使用this和that之类的内容来触发事件并添加和删除

         $(".ht-current").hover( 
            function(){ 
             $("#hot-regions").addClass('yourHover');
            },
            function(){
             $("#hot-regions").removeClass('yourHover');
            });

Jquery在鼠标上显示块

4 个答案: