How to fix parent hover issues with CSS?

Question

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?

Answer 1

Try this: (JSfiddle)

<div class="wrapper">
    <div class="back">

    </div>
    <div class="container">

    </div>
</div>

CSS

div.wrapper {
    width:100%;
    height:100%;
    position:fixed;
    margin:auto auto;

    z-index:0;
}
div.back {
    width: 100%;
    height: 100%;
    background-color:rgba(34,34,34,0.5);

    transition:background-color ease-in-out 0.25s;
    z-index: 1;
}
div.back:hover {
    background-color:rgba(34,34,34,0.25);
    cursor:pointer;
}
div.wrapper > div.container {
    width:400px;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background:#3498DB;
    box-shadow:0 0 15px rgba(0,0,0,0.25);
    z-index: 2;
}

hovering child always trigger parents hover, but you can make a fake parent to reach your goal.

Answer 2

Why would you doing that?

If you want hover the child, just add hover to child.

If you want hover works for both, why not putting them as siblings not parent-child .

Hope this can help you.