两个div共享一个边框并悬停:在bug之后

Question

在div的角落我需要四个盒子.当盘旋在某个div上时,我想display:block在中间隐藏div,与当前悬停的盒子共享一个边框.

这是我目前解决方案的问题

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

问题:

因此在Chrome中,悬停该区域会产生一些奇怪的隔行效果.每个鼠标移动1px隐藏并显示内容div.你可以在这里看到它

在最新的Firefox中似乎没问题,但是在创建的jsfiddle中还有一些其他的错误,您可以自己测试.

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

编辑 - 最终解决方案:

最重要的是要设定pointer-events: none;到after块元素.由于我在这里使用SASS在jsfiddle上获得了一些更高级的代码 ,这里使用普通的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

它是"闪烁"的原因与伪元素无关; 这是因为你将.box-content元素部分覆盖在元素上,.box因此,当你移动鼠标时,它不再悬停在.box触发.box-content元素显示的元素上,而是将鼠标悬停在.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属性添加到.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;
  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不支持pointer-events,IE仅在v11中添加了支持.