Having trouble clicking the button due to the overlay blocking it?

This code contains the HTML portion

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

Below is the CSS code

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

The issue I'm experiencing is that when I try to click the button, an overlay appears which prevents me from clicking it. Although I don't want to remove the overlay, is there a way to still be able to interact with the button even with the overlay present?

htmlcsshyperlink

Answer №1

Solution one

To ensure your button is clickable above an overlay, consider increasing its z-index value.

Solution two

If you prefer, you can prevent the overlay from blocking mouse events by adding pointer-events:none; to it, allowing the button to be clicked through it.

Edit: It's recommended to use pointer-events whenever possible, with z-index as a secondary option. If you resort to using z-index, I recommend defining this style in your CSS rather than inline for better organization.

Answer №2

There are numerous possibilities to consider... Be sure to investigate whether any z-index properties have been applied to parent elements of the element. I faced a similar issue and resolved it through troubleshooting: I opened a JavaScript file and used console.log to identify the target className I clicked on (achieved by:

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

)

After logging the className, click on the malfunctioning button while ensuring that a class has been added to it previously. Verify if the class is displayed correctly. At times, I had to move the console outside the window.

Through this process, I discovered that my SVG Animation was occupying invisible space overlapping the button. To resolve this issue, I simply assigned a z-index value of -1 to the SVG.

I hope this information proves beneficial! As I struggled to find a solution, I aim for my experience to assist others as well.

Note: Additionally, review the pointer events for both the button and other elements to confirm they are not set to none.

Answer №3

replace the use of before and after with span, try this out 

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

using span ensures it does not interfere with clickable area

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP: I am unable to establish a connection with the script or submit form data to mySQL

Seeking assistance with debugging this script. (The * represents confidential information that I am aware of but cannot share) <?php $dbhost = '*********'; $dbuser = '*********'; $dbpass = '*********'; $conn = mysql_conne ...

phpmysqlformshtml

Having trouble rendering Next.JS dynamic pages using router.push()? Find out how to fix routing issues in your

The issue I am facing revolves around the visibility of the navbar component when using route.push(). It appears that the navbar is not showing up on the page, while the rest of the content including the footer is displayed. My goal is to navigate to a dy ...

htmltypescriptnext.jsroutes

What is the best way to show a border-left outside of the list marker in Internet Explorer 8?

I have a numbered list that I would like to add a left border to. <ol class="steps"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <ol> .steps {border-left: 5px double #7ab800;} When viewing in Fir ...

htmlcssinternet-explorer-8

Navigating a series of HTTP requests with VBA and saving the retrieved data in Excel 2010

I have a total of 5 Excel files that I currently use with WinHttpRequest to extract data into them. My goal is to consolidate all the requests into a single VBA script, loop through them, and store the data sequentially on one sheet. However, I am facing ...

htmlexcelvbaweb-scraping

Design element: Text overlaying background with a touch of transparency

Is there a way to create a background image with an opacity level of 0.5, while maintaining the text on top at full opacity (1) for better readability? Currently, the background image is not displaying as desired, and the opacity settings are affecting the ...

cssreactjsmaterial-ui

Refresh the NodeJS page without resending user data

I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...

htmlnode.js

Utilizing unique background images tailored to different screen resolutions

In order to enhance the user experience on my website, I am looking to implement a feature that dynamically changes the background images based on the user's screen resolution. My plan is to use a small snippet of JavaScript within the <head> s ...

javascriptcsssecuritybackground-imagescreen-resolution

Desktop users can enjoy the off-canvas menu feature, while mobile users will have access to the accordion menu option with Foundation 6

My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices. On desktop, I want the off-canvas menu always visible (see example). For mobile, when the hamburger icon is ...

jquerycsszurb-foundationzurb-foundation-6

Setting a maximum height using flex property of 1 while also enabling overflow

Imagine a scenario where you have a <div with a height specified as a percentage of its parent's height, and this <div contains a contenteditable element as its child. The goal is to make the child fill all available vertical space and scroll wh ...

cssflexboxoverflow

div.load() results in a complete page reload

When I save form data, my goal is to load only the specific div without refreshing the entire page. However, despite using the preventDefault() command, the form still seems to be posting the whole page. I have tried adding the following code: $("#btn ...

javascriptjqueryhtmlasp.net-mvc

Utilizing MaterialUI and CSS to craft this stunning box

Looking to create a new MaterialUI component similar to this one: original box Struggling with implementing it using the card component, but so far it looks like: poorly designed box Here's my custom styling using makeStyles: const useStyles = ma ...

cssreactjsmaterial-ui

Tips on arranging the layout to prevent text from shifting alongside the image

Is there a way to prevent the positioning and size of an image from affecting the layout of my list? I'm new to coding and struggling with this issue in my first project. Any advice or guidance would be greatly appreciated. <!DOCTYPE html> <h ...

htmlimageformathtml-lists

Out of the DIVs floating left and right, which one is positioned first?

Is the order of <div> elements in HTML important? If it is, what is the reason behind it? .float-left{float:left;} .float-right{float:right;} <div> <div class="float-left">Left</div> <div class="float-right">Right</ ...

htmlcss

I've noticed that my alert is not appearing when I click submit. Can someone please help me figure out what I could

I am having trouble getting my alert to display when the form is not validating. It should show an alert message if the form is valid but it's not working as expected. I've spent hours trying to fix this issue with no luck. I appreciate any help ...

javascripthtmlformsfunctionvalidation

Guide to building a personalized autocomplete feature in vue js

Presently, I am using the buefy autocomplete feature, but it is causing a few problems. In the DepartmentDetail.vue file <template slot-scope="props"> <div class="container is-fluid"> <b-loading :is-full-page=" ...

htmlvue.js

PHP code isn't showing any posts

Context: I have implemented a PHP loop to generate a dynamic feed of my portfolio posts on my WordPress website. Issue: The first five posts are being displayed correctly, but the subsequent posts are not. I'm uncertain about the underlying cause and ...

phphtmlcsswordpressloops

TinyMCE: Tips for adding and highlighting text in your content!

Is there a way to insert, or even replace the current selection with some content and then have it automatically selected? Take for instance this text: Hello nice world! The user has selected nice. After clicking a button, this code is executed: editor. ...

javascriptjqueryhtmltinymce

Changing images based on different triggers - HTML Markup with jQuery Carousel

I have a website where I'm using a plugin called CarouFredSel, available at Most of the time, it works perfectly fine. However, there are some images that cause the markup to break. I've tried troubleshooting the issue but haven't been able ...

jqueryhtmlcarousel

Troubleshooting AngularJS Directives' Cross-Origin Problems within Eclipse

Hello, I am facing an issue while using Angular JS in Eclipse. Specifically, when attempting to use Directives, I encounter a problem with the Cross-Origin Resource Sharing (CORS) policy when loading the Directives template in the index.html file. XMLHttp ...

javascripthtmlcssangularjseclipse

How can I preselect an item in a dropdown list in HTML using the result of an SQL query

Is this the correct method for setting a default value in an HTML drop down menu? The variable $vendor_name is determined by retrieving an array of results through a query, which is then looped to generate table rows in HTML. Consequently, the value of $v ...

phphtmlmysqli