Слияние границ 2 divs при наведении на

Question

У меня есть два элемента div. Первый элемент отображается пользователю, и когда пользователь наводится на него, ему показывают оставшиеся элементы. При наведении курсора, я хочу удалить общие границы обоих этих элементов div.

Я попытался добавить этот css в верхний элемент div, чтобы удалить его границу при наведении курсора и увеличить его z-индекс таким образом, чтобы он закрывал верхнюю часть ниже div. Но это не работает. Нужна помощь в этом.

Без парения:

__________________ 
|     | 
|__________________| 

С парением (в настоящее время с упомянутым выше CSS):

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

требующегося на парении (это то, что он должен выглядеть как после удаления общей границы):

__________________ 
|     | 
|     |__________________ 
|          | 
|_____________________________________| 

Fiddle Ссылка: 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>