Jquery在鼠标悬停时显示块

这里是我做我的东西的网站。现在，在该链接中，您可以看到一个名为“来自全球顶级供应商的

来源”的部分

，在该部分中，您可以看到一个名为“热点地区”的块。现在，当你将鼠标悬停时，你可以看到它显示的是一个带有某个国家国旗的块。但是当你将鼠标移动到某个国旗上时，框就隐藏了。但是我想知道，当你将鼠标移动到任何一个国旗上时，框仍然会在那里。我已经跟踪了该悬停部分的站点

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

注意

这是小提琴的链接 这是小提琴的链接

---

我希望结果与引用的链接完全相同…

您需要在

#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');
    });

  });  

---

查看您的更新版本。

您可以使用类似于

this

和

的内容，这是触发事件以及添加和删除事件所需的div

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

生活

有几件事

首先，使用and而不是and

接下来，从JSFIDLE示例中删除以下内容：

CSS:

最后，使用以下方法：

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');
    });
  });  

演示：

希望这对您有所帮助，如果您有任何问题，请告诉我。
谢谢您的回答，但我希望当我将鼠标悬停在热点区域时，框应该会出现，这对您的小提琴很好，而且热点区域框也应该出现，就像参考链接一样。谢谢您的回答，但我希望当我将鼠标悬停在热点区域时，框应该会出现来吧，这是你的小提琴和热区域框也应该来看看，就像参考链接，我没有发现任何差异，在参考链接和小提琴。你能详细指出吗？我已经更新了我的答案。如果你发现与参考网站相比有任何问题，请简要描述一下。嗨，谢谢你的回复。但在这里我想告诉你们的是，当你们要去的时候，你们可以看到有一个叫做“热区”的街区，当你们在上面悬停的时候，它会显示其他国家的国旗。这是你在小提琴上做的，没关系。但在该站点中，您可以看到何时将鼠标悬停在热点区域上，热点区域仍然可见。但是在你的小提琴里有热的区域，当你悬停的时候，你可以看到热的区域正在消失。这就是我要问的..他想在鼠标离开当前
.hr
后，当鼠标隐藏时将其删除。
.hr hover.current
边距应替换为
可见性：隐藏
，但它不起作用。。。
.hr-hover .hr-current {
    margin-top: 0;
}

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');
    });
  });