Ok guys here's how the code looks like right now:

​

if (document.location.pathname === "/product-category/cacheados/") {

document.getElementsByClassName("filterbtn")[0].classList.add("active"); document.getElementsByTagName("a")[0].classList.add("active");

`document.getElementById('cacheados').src = "`[`https://italianbeauty.com.br/wp-content/uploads/2019/05/Cacheados-branco.png`](https://italianbeauty.com.br/wp-content/uploads/2019/05/Cacheados-branco.png)`";`    

`function mouseOutImage1() {`            

`document.getElementById('cacheados').src = "`[`https://italianbeauty.com.br/wp-content/uploads/2019/05/Cacheados-branco.png`](https://italianbeauty.com.br/wp-content/uploads/2019/05/Cacheados-branco.png)`";` 

`}` 

}

​

This code works, as you can see here: https://italianbeauty.com.br/product-category/cacheados/

It basically says that if the user is accessing /product-category/cacheados/ then the class "active" will be added to the first element that contains the class "filterbtn", which's the button that says "Cacheados" since the user is accessing that category.

I also added js code that basically tells the browser to keep the white icon on mouseout if the user is accessing this page, because otherwise it would replace the white icon with the black again.

Now I'm trying to remove the hyperlink from the button, since it should be disabled. Here's the code of it:

​

div class="textwidget custom-html-widget">

<ul>

<a class="active" href="https://italianbeauty.com.br/product-category/cacheados/?customize_changeset_uuid=81a1dbab-286e-4829-8187-651bcb098ebc&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-50">

<li class="filterbtn active" onclick="filterSelection('cacheados')" onmouseover="mouseOverImage1()" onmouseout="mouseOutImage1()"><img id="cacheados" src="https://italianbeauty.com.br/wp-content/uploads/2019/05/Cacheados-branco.png" alt="Cacheados">Cacheados

</li>

</a>

</ul>

</div>

​

I've tried using this css rule but it didn't work:

​

a.active {

`pointer-events: none;`

`cursor: pointer;`

}

​

It works if I leave this css rule to apply to the <a> tag only, but the <a> tag must be disabled if the class .active is on it.