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

Question

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

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

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

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

剩下的唯一一步就是从您的父类别中删除 link。如果你不删除这个link，它会在你点击它时自动重定向你

Answer 3

只是我们可以通过Jquery在悬停效果时隐藏容器，例如

 // remove popup on hover for mini cart dawar
   $(".icon").hover(function(){
        $("#container").css("display", "none");
    });

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

Disable hover effect, but keep on click function

css

wordpress

hover