禁用悬停效果，但继续点击功能

Posted 2023-05-08

【中文标题】禁用悬停效果，但继续点击功能

【英文标题】：Disable hover effect, but keep on click function

【发布时间】：2021-02-11 09:33:30

【问题描述】：

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

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

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

Wordpress 自定义自定义 CSS，

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

这类问题有 CSS 解决方案吗？

【问题讨论】：

是的，指针事件只是禁用点/鼠标指针所产生的事件，如点击事件。要禁用下拉菜单，您可以使用：.widget.woocommerce.widget_product_categories ul li > ul display: none !important;

@CarlOrtiz 感谢您对卡尔的评论！不幸的是，这不是我想要的。悬停效果现在已禁用，但未显示子类别的下拉菜单。我看不到子类别:(

【参考方案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;
 

【讨论】：

嗨 Gaby，我试过：悬停并添加指针事件：无。发生的事情是悬停被禁用，但是当我点击父类别时，下拉菜单没有显示（没有任何反应）:(

嗨 @ŽeljkoRonta 可以分享网站链接，以便我为您检查吗？

感谢您的评论。我把这段代码放在function.php中并得到错误：语法错误，意外'）'，期望变量（T_VARIABLE）认为这是因为：.click（函数（事件）最后是'）'跨度>

不，你不应该把这段代码放在一个php文件中，它应该添加到你活动主题中的一个JS文件中，如果你不知道怎么做，告诉我，我会试试为您提供帮助

没有盖比。客户只是提供了 cpanel 信息，所以我可以正确搜索 js 文件。是否有特定的 js 文件或者我可以将此代码放在任何 js 文件中？

【参考方案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;

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

【讨论】：

不幸的是，不起作用 :S 我在 style.css 主题文件中将 ":hover" 更改为 ":active" 并且没有任何反应:(

【参考方案3】：

我们可以在 Jquery 的悬停效果中隐藏容器，例如

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