悬停时合并 2 个 div 的边框

Question

我有 2 个 div 元素。第一个元素对用户可见，当用户将鼠标悬停在它上面时，会显示其余元素。悬停时，我想删除这两个 div 元素的共同边界。

我尝试将此 css 添加到顶部 div 元素，以便在悬停时删除其边框并增加其 z - 索引，使其覆盖下方 [=28] 的顶部=].但它不起作用。需要帮助才能完成这项工作。

没有悬停：

 __________________
|                  |  
|__________________|

悬停（目前上面提到CSS）：

 __________________
|                  |  
|__________________|__________________
|                                    |
|____________________________________|

悬停时需要（这是删除公共边框后的样子）：

 __________________
|                  |  
|                  |__________________
|                                     |
|_____________________________________|

Fiddle Link: https://jsfiddle.net/fqw63Lzn/1/

Answer 1

这里有一些 hack 可以帮助我们。这不是很优雅。不知道你想做什么，但它应该有效。它基本上是一个 div 具有相同尺寸的边框和列表背景颜色的背景，覆盖父边框。

.topTabButton {
  border: 10px solid black;
  width: 50px;
  text-align: center;
}
.hack {
  position: absolute;
  height: 10px;
  width: 50px;
  margin-top: -10px;
  background: white;
}
.itemList {
  display: none;
  position: relative;
  z-index: 12;
  margin-top: -10px;
  border: 10px solid black;
  border-color: black;
  background-color: white;
}
.enclose:hover .itemList {
  display: block;
  z-index: 12;
}

<div class="enclose">
  <div class="topTabButton" id="topTabButton1">
    <p>ABC</p>
  </div>
  <div class="itemList" id="itemList1" style="width: 60%">
    <div class="hack"></div>
    <div class="list">
      <div>
        <div>sorry, changed to divs</div>
        <div>I think that tables can work it out too</div>
      </div>
    </div>
  </div>
</div>

悬停时合并 2 个 div 的边框

Merging borders of 2 divs on hover over

html

css