The transparent div is over white background div which contains a button. How to add hover effect?-CodePudding

A transparent div is over another div which is not transparent. Below is the CSS code for your reference.

html {
width: 100vw;
height: 100vh;
}
body {
margin: 0;
}
.parent {
display: block;
width: 100vw;
height: 100vh;
background-color: transparent;
position: absolute;
top: 0;
left: 0;
}

HTML code

<html>
<body>
<div ></div>
<button onclick="alert('Successful');">Click me!</button>
</body>
</html>

Now how can I click that button. I don't want to remove that transparent div because it plays an important role in my actual project. Is it possible to click that button? Not just button I want to make the div behind that accessible.

You might recommend me to use z-index CSS property. But I want it to be behind the transparent div.

Edit Here is the URL to my actual issue. https://minisoftmaxsol.000webhostapp.com/index.html. In that webpage you can find a menu (white div with black shadow) which can be moved with a finger. Everything looks good. But the issue is mouse events not working for the iframe.

CodePudding user response：

there is a CSS Property that affects any element such that mouse doesn't work on the element. So, if you add the css property to the parent element, it would lose the ability to use the mouse, hence it will always click the button. Here's the CSS:

.parent{
    /*
      old css
    */
    pointer-events: none;
}

Warning: If you set this property, mouse would never be able to click the parent element or select any text in the parent element.

Hope you find it useful! ;-) Good Luck!

EDIT>> Let me tell you that tweaking with z-index won't work here because z-index can only be applied on the elements which have the position property set to fixed, absolute or sticky.

CodePudding user response：

I had the same type of issue in my previous projects,

Here is a fiddle I made JSFIDDLE.

The trick is to wrap the button in a position:relative property!