Can't click the button because of the overlay?

Question

This is the HTML

<li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li>

This is the CSS

.navs:after {
  content: "";
  position: absolute;
  top: 0;  left: 0;  right: 0;  bottom: 0;
  background: #0d0d0d;
  opacity: 0.5;
  transform: scaleY(0);
  transform-origin: 0 100%;
  transition: all .2s ease-out;
}
.navs:hover:after{
  transform: scaleY(1);
}
.navs:active:after{
    background: #FFFFFF;
}

I think the reason why i can't click the button is because when i click the button, the overlay forms. I do not want to remove the overlay though. Is there any way to click through the overlay?

Answer 1

Option one

You can give your element a higher z-index. This will move your button above the overlay, so you will be able to click it

Option two

You can disable all mouse events on your overlay using pointer-events:none; so the click event will 'fall through' it and the button will register it

Edit: Use pointer-events when you can, let z-index be your backup plan. If you fall back to it, I suggest that you don't use it inline, but write a specific selector for it in your CSS.

Answer 2

It could be many different things... Definitely try to check if you've used any z-index properties for other elements that are the parents of the element. I encountered the exact same problem and I fixed it by troubleshooting: what I did was pull up a javascript file and console log the target className of where I was clicking (can be done by:

    window.addEventListener('click' , (e) => {
        const target = e.target.className; 
        console.log(target);
    })

)

Once I did that, click on the button that doesn't seem to be working. Make sure to add a class to your button before this and check if the class is displayed properly. Sometimes, in my case, I had to move the console out of the window.

From this, I found my SVG Animation was actually taking up invisible space that covered the button. All I had to do to fix this problem was give the SVG a z-index of -1.

Hope this helped! I know I took a long time to find a solution so I hope my solution can help others too.

Note: Also check your pointer events (make sure it isn't set to none) for the button and other elements

Answer 3

use span instead of before and after, something like

<a href="my link"><img  class="" src="my_image" alt="">
<span class="rig-overlay"></span>
<span class="rig-text">
<span>name</span>
<span>function</span>
</span>
</a>

the span will not cover the clickable region