css两个盒子之间只显示一条边框_css – 两个div共享一个边框并悬停：在bug之后...

在div的角落我需要四个盒子.当悬停在某个div上时,我想显示：阻止中间隐藏的div,与当前悬停的框共享一个边框.

它几乎正常.但是,角落区域存在一些错误.我在那里使用：after显示带有背景的块元素.它是为了实现两个元素的一个边界的效果.

问题：

因此在Chrome中,悬停该区域会产生一些奇怪的隔行效果.每个鼠标移动1px隐藏并显示内容div. You can see it here in action

在最新的Firefox中它看起来没问题,但是在创建的jsfiddle中还有一些其他的错误你可以自己测试一下.

我使用灰色背景只是为了更好地显示问题.现在也假设为盒子1工作.用鼠标悬停尝试了一些jQuery并且没有成功.

编辑 – 最终解决方案：

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

BOX NAME 1

BOX NAME 2

BOX NAME 3

BOX NAME 4