禁用悬停效果，但保持点击功能

Question

这是我第一次使用stackverflow，希望有人可以帮助我解决此类问题。

我在Wordpress中创建了网站，并希望在网上商店的类别列表上禁用悬停效果。有父类别，当您使用鼠标悬停时，会自动下拉子类别。经过研究，我发现了css解决方案，如下所示：

gsub(":.*?(;|$)","\\1",s,perl = TRUE)

Wordpress自定义自定义CSS，

经过这种更新后，我发现了问题-当我单击父类别时，什么也没有发生（因为显然是指针事件）。

有没有针对此类问题的CSS解决方案？

Answer 1

您好尝试了以下方法，我认为您可以使用CSS来仅在悬停时禁用指针事件：

.widget.woocommerce.widget_product_categories ul li:hover {
pointer-events: none;
}

编辑1：

好的，不能仅使用CSS来完成所需的功能，而是需要一些Javascript。

尝试在主题javascript文件中添加以下代码

jQuery(".cat-item.cat-parent > a").click(function(event) {
  event.preventDefault();
  const ul_children = jQuery(this).parent().find('> ul.children');
  if(jQuery(this).parent().hasClass('open')) {
    jQuery(this).parent().removeClass('open')
    ul_children.css('max-height',0)
  } else {
    jQuery(this).parent().addClass('open');
    ul_children.css('max-height', ul_children[0].scrollHeight )
  }
  
})

还添加以下CSS：

 .product-categories > .cat-parent:hover > ul.children {
    max-height: 0px;
    
}
.product-categories li ul.children li:hover > .children {
  max-height: 0px;
} 

Answer 2

您应该替换此代码

.cat-parent:hover > ul.children {
    max-height: 373px;
    overflow-y: scroll;
    overflow-x: hidden;
}

这个人

.cat-parent:active > ul.children {
    max-height: 373px;
    overflow-y: scroll;
    overflow-x: hidden;
}

剩下的唯一步骤是从父类别中删除链接。如果您不删除此链接，则单击它会自动将您重定向