Two divs share one border and hover: after error

Question

I need four boxes in the corners of a div. When falling onto any div, I want to display:block hidden div in the middle, sharing one border with the field that is currently hoarding.

Here is jsfiddle with my current solution

It works almost fine. However, there are some errors regarding the angular region. I am showing a block element with a background using :after . To achieve the effect of one border for two elements.

Problem:

Thus, in Chrome, hovering in this area, there is some strange alternating effect. Each 1px mouse movement hides and displays the contents of a div. You can see it here in action.

In newer Firefox, this looks fine, but there is another error in the jsfiddle created that you can check yourself.

I use a gray background only to better visualize the problem. Suppose we are now working for box 1. Tried some jQuery with hover and hover without success.

EDIT - Final Solution:

The most important thing is to set the pointer-events: none; element pointer-events: none; in after . Since I got a few votes here is more advanced jsfiddle code using SASS , and here using simple css:

CSS

 .outer { width: 90%; height: 300px; position: relative; } .box-content { display: none; width: 80%; height: 80%; position: absolute; left: 10%; top: 13%; background: white; z-index: 1; } .box { width: 150px; height: 60px; position: absolute; border: 1px solid white; background: white; } .box:hover:after { content: ''; background-color: white; z-index: 2; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .box:hover p { z-index: 3; } .box p { position: absolute; top: 23px; left: 13px; color: black; padding: 0; margin: 0; } .box-one { top: 0; left: 0; } .box-one:hover { border: 1px solid blue; } .box-one:hover ~ .content-one { border: 1px solid blue; display: inline-block; pointer-events: none; } .box-two { top: 0; right: 0; } .box-two:hover { border: 1px solid red; } .box-two:hover ~ .content-two { border: 1px solid red; display: inline-block; pointer-events: none; } .box-three { bottom: 0; left: 0; } .box-three:hover { border: 1px solid yellow; } .box-three:hover ~ .content-three { border: 1px solid yellow; display: inline-block; pointer-events: none; } .box-four { bottom: 0; right: 0; } .box-four:hover { border: 1px solid green; } .box-four:hover ~ .content-four { border: 1px solid green; display: inline-block; pointer-events: none; } 

HTML

 <div class="outer"> <div class="box box-one"> <p>BOX NAME 1</p> </div> <div class="box box-two"> <p>BOX NAME 2</p> </div> <div class="box box-three"> <p>BOX NAME 3</p> </div> <div class="box box-four"> <p>BOX NAME 4</p> </div> <div class="box-content content-one"></div> <div class="box-content content-two"></div> <div class="box-content content-three"></div> <div class="box-content content-four"></div> </div> 

Answer 1

The reason it “flickers” is not related to the pseudo-element; because you partially overlay the .box-content element on the .box elements, so when you move the mouse it no longer hovers over the .box element, which launches the .box-content element to display, rather, it hangs over the .box-content element, therefore he disappears. Move the mouse again, and hover over the .box again by running .box-content again. To fix this, simply add the :hover pseudo-class to the .box-content element, for example:

 .outer { width: 100%; height: 300px; position: relative; } .box { width: 150px; height: 60px; border: 3px solid black; position: absolute; z-index: 1; } .box:after { content: ''; background-color: grey; z-index: -1; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .box:hover ~ .box-content { display: inline-block; } .box p { color: white; padding: 10px; z-index: 1000; } .box-content { display: none; width: 80%; height: 80%; border: 3px solid black; position: absolute; left: 10%; top: 11%; } .box-content:after { content: ""; background-color: grey; z-index: 2; display: block; position: absolute; width: 20%; height: 30%; left: 0; top: 0; } .box-content:hover { display: inline-block; } .box-two { top: 0; right: 0; } .box-three { bottom: 0; left: 0; } .box-four { bottom: 0; right: 0; } 

 <div class="outer"> <div class="box"> <p>BOX NAME 1</p> </div> <div class="box box-two"> <p>BOX NAME 2</p> </div> <div class="box box-three"> <p>BOX NAME 3</p> </div> <div class="box box-four"> <p>BOX NAME 4</p> </div> <div class="box-content"></div> </div> 

Alternatively, if you do not want .box-content remain visible during hovering, but not hovering over one of the .box elements, add the pointer-events property to .box-content , for example:

 .outer { width: 100%; height: 300px; position: relative; } .box { width: 150px; height: 60px; border: 3px solid black; position: absolute; z-index: 1; } .box:after { content: ''; background-color: grey; z-index: -1; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .box:hover ~ .box-content { display: inline-block; } .box p { color: white; padding: 10px; z-index: 1000; } .box-content { display: none; width: 80%; height: 80%; border: 3px solid black; position: absolute; left: 10%; top: 11%; } .box-content:after { content: ""; background-color: grey; z-index: 2; display: block; position: absolute; width: 20%; height: 30%; left: 0; top: 0; pointer-events: none; } .box-two { top: 0; right: 0; } .box-three { bottom: 0; left: 0; } .box-four { bottom: 0; right: 0; } 

 <div class="outer"> <div class="box"> <p>BOX NAME 1</p> </div> <div class="box box-two"> <p>BOX NAME 2</p> </div> <div class="box box-three"> <p>BOX NAME 3</p> </div> <div class="box box-four"> <p>BOX NAME 4</p> </div> <div class="box-content"></div> </div> 

Please note that Opera Mini does not support support pointer-events , and IE only adds support in v11.