Jquery 显示和隐藏无法正常工作

Question

我正在开发一个 shopify 网站，我想要实现的是，当您将鼠标悬停在网站上的菜单上时，当前它显示了两个名称为（最受欢迎产品）的产品，有两种不同的产品，所以我正在尝试将鼠标悬停在第一个菜单标题上时隐藏演示产品并显示 Demoproduct2 并隐藏演示产品 2 悬停在第二个菜单标题上并显示 Demoproduct

我也给了他们不同的 id

Latest Arrivals:#tabbs0
Editors Picks:#tabbs5

DemoProduct:menuproductone
Demoproduct2:menuproducttwo

这是我的网站网址： https : //amused-dev.myshopify.com/

到目前为止，我已经尝试过这个

 jQuery(document).ready(function() { jQuery("a#tabbs0").hover(function() { jQuery('div#menuproductone').show(); }, function() { jQuery('div#menuproducttwo').hide(); }); jQuery("a#tabbs5").hover(function() { jQuery('div#menuproducttwo').show(); }, function() { jQuery('div#menuproductone').hide(); }); });

Answer 1

一起使用show()和hide()函数。

您在每个hover事件中使用两个函数。

1. 第一个函数绑定到mouseenter事件
2. 第二个函数绑定到mouseleave事件

避免这种情况，您就可以开始了。

jQuery(document).ready(function() {
  jQuery("a#tabbs0").hover(function() {
    jQuery('div#menuproductone').show();
    jQuery('div#menuproducttwo').hide();
  });

  jQuery("a#tabbs5").hover(function() {
    jQuery('div#menuproducttwo').show();
    jQuery('div#menuproductone').hide();
  });
});