I am having issues with my child element still acting as :hover
for my parent element, which I don't want to happen.
Is there a way, using css to stop my child element from activating the hover for my parent element? JSfiddle
Here is a basic example of my issue:
div.wrapper {
width:100%;
height:100%;
position:fixed;
margin:auto auto;
background-color:rgba(34,34,34,0.5);
transition:background-color ease-in-out 0.25s;
z-index:98;
}
div.wrapper:hover {
background-color:rgba(34,34,34,0.25);
cursor:pointer;
}
div.wrapper > div.container {
width:400px;
height:100%;
position:relative;
background:#3498DB;
box-shadow:0 0 15px rgba(0,0,0,0.25);
}
<div class="wrapper">
<div class="container">
</div>
</div>
As you can see, when you hover over the blue area (child) it still triggers the gray area (parent). How do I solve this issue?