Question

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

我尝试将此css添加到顶部div元素，以便在悬停时移除其边框并增加其z-index，使其覆盖div下方的顶部。但它没有用。需要帮助才能完成这项工作。

不悬停：

 __________________
|                  |  
|__________________|

悬停（目前有上述CSS）：

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

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

 __________________
|                  |  
|                  |__________________
|                                     |
|_____________________________________|

小提琴链接：https://jsfiddle.net/fqw63Lzn/1/

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在悬停时合并2个div的边框

1 个答案: