Disable hover effect, but keep on click function - css

Question

This is my first time on stackverflow and hope someone could help me with this kind of problem.
I made website in Wordpress and want to disable hover effect on my category list in webshop. There are parent categories which automatically, when you hover with mouse, dropdown child categories. After researching i found css solution which looks like this:
.widget.woocommerce.widget_product_categories ul li{
pointer-events:none;
}
Wordpress Customize Custom CSS,
After this kind of update i found the problem - when i click on parent category, nothing happens (because of pointer-events obviously).
Is there any CSS solution for this kind of problem?

Answer 1

Hello did you try the following, I think you can use the CSS to just disable to pointer event on hover:
.widget.woocommerce.widget_product_categories ul li:hover {
pointer-events: none;
}
Edit 1:
ok the functionality that you need can't be done with CSS alone, you will need a bit of Javascript.
Try to add the following code in theme javascript file
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 )
}
})
also add the following CSS:
.product-categories > .cat-parent:hover > ul.children {
max-height: 0px;
}
.product-categories li ul.children li:hover > .children {
max-height: 0px;
}

Answer 2

You should replace this code
.cat-parent:hover > ul.children {
max-height: 373px;
overflow-y: scroll;
overflow-x: hidden;
}
by this one
.cat-parent:active > ul.children {
max-height: 373px;
overflow-y: scroll;
overflow-x: hidden;
}
The only step left is to remove the link from your parent category. If you do not remove this link, it will redirect you automatically when you click on it

Answer 3

Simply we can hide container when in hover effect by Jquery such as
// remove popup on hover for mini cart dawar
$(".icon").hover(function(){
$("#container").css("display", "none");
});