Question

我正在一个shopify网站上工作，我想要实现的是，当您将鼠标悬停在网站上的菜单上时，当前它正在显示两个名称为（最受欢迎的产品）的产品，有两个不同的产品，那又是什么？我正在尝试将Demo产品悬停在第一个菜单标题上方并显示Demoproduct2并将Demo product2悬停在第二个菜单标题上方并显示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事件中都使用两个函数。

第一个函数绑定到mouseenter事件
第二个函数绑定到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();
  });
});

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

1 个答案: