在div的角落我需要四个盒子.当悬停在某个div上时,我想显示：阻止中间隐藏的div,与当前悬停的框共享一个边框.
Here is jsfiddle with my current solution
它几乎正常.但是,角落区域存在一些错误.我在那里使用：after显示带有背景的块元素.它是为了实现两个元素的一个边界的效果.
问题：
因此在Chrome中,悬停该区域会产生一些奇怪的隔行效果.每个鼠标移动1px隐藏并显示内容div. You can see it here in action
在最新的Firefox中它看起来没问题,但是在创建的jsfiddle中还有一些其他的错误你可以自己测试一下.
我使用灰色背景只是为了更好地显示问题.现在也假设为盒子1工作.用鼠标悬停尝试了一些jQuery并且没有成功.
编辑 – 最终解决方案：
最重要的是设置指针事件：无;到块后元素.自从我在here’s more advanced code on jsfiddle using SASS
获得一些投票,这里使用普通的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>
解决方法
它是“闪烁”的原因与伪元素无关;这是因为你将.Box-content元素部分覆盖在.Box元素上,因此,当你移动鼠标时,它不再悬停在触发.Box-content元素显示的.Box元素上,而是悬停在在.Box-content元素本身上,它就消失了.再次移动鼠标,它再次悬停在.Box元素上,触发.Box-content再次显示.要解决此问题,只需将：hover伪类添加到.Box-content元素,如下所示：
.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>
或者,如果您不希望.Box-content在将鼠标悬停在其上时保持可见但不悬停在其中一个.Box元素上,则将pointer-events property添加到.Box内容,如下所示：
.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>
但请注意,Opera Mini不是support pointer-events,而IE仅在v11中添加了支持.
