Make css: hang only affects parent

Question

In css, how can I stop the :hover event that fires in the parent when the child event freezes, so that it fires only when the parent itself is hovering? In this case, my child is actually located outside of its parent with absolute positioning, so it's a little weird when the parent changes when the child freezes.

I did a JSFiddle to illustrate the problem.

Here's the JSFiddle of the solution used in my example.

Answer 1

There is a purely css solution (even two actually), but both of them are expensive.

• You can add event pointers: none; to your child - but it will also not respond to its own hover styles. Pointer-events , unfortunately, are not supported in IE below version 11 ( http://caniuse.com/#search=pointer-events ).

• Wrap the contents of your parent (except the positioned child) in another (this is the cost of this method) and apply the hover styles for this wrapper.

Examples of both methods are here .

 .parent-2, .parent { position:relative; background:#ddd; width:100px; height:100px; } .parent:hover { background:blue; } .child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; } /* doesn't work in opera and ie */ .content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;} .content:hover { background:blue; } 

Answer 2

Simple: do not embed your #inner div inside. Small demo: small link . Notice that I added:

 html, body { position: relative; } 

What is needed in this case.

Edit: if you insist on its nesting, a little JavaScript is needed. Here's a sample:

 var inn = document.getElementById("inner"), outt = document.getElementById("holder"); outt.onmouseover = function() { this.style.backgroundColor = "rgb(0, 162, 232)"; /*I like this color :)*/ } outt.onmouseout = function() { this.style.backgroundColor = "orange"; } inn.onmouseover = function(ev) { ev.stopPropagation(); } 

(This will be shorter if written using jQuery, but the idea is the same).

Here is a demo: a small link .

Answer 3

You need to use some JavaScript to stop the event from bubbles. Take a look at this example:

css: hover affects only the top div from the socket