Bootstrap коллапс работает, чтобы скрыть, но не показывать

Question

Короче говоря, это происходит: https://jsfiddle.net/exr4hv8z/2/ (попробуйте мышью над кнопками, а затем передвигая мышь из несколько раз)

по какой-либо причине, элементы разрушиться прочь, чтобы скрыть только штраф , но другой элемент, который должен свернуть, чтобы просмотреть wint aimate и просто появляется, как только будет выполнен другой элемент.

HTML:

<div id="nav_bar"> 

<a href="index.php"> 
    <div class="navbutton_background background_normal collapse in"></div> 
    <div class="navbutton_background background_hover collapse" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse" style="height: 0;"></div> 
    <button class="navbutton rightborder">Home</button> 
</a> 

<a href="forum.php"> 
    <div class="navbutton_background background_normal collapse in left_1"></div> 
    <div class="navbutton_background background_hover collapse left_1" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse left_1" style="height: 0;"></div> 
    <button class="navbutton leftborder rightborder left_1">Forums</button> 
</a> 

<a href="servers.php"> 
    <div class="navbutton_background background_normal collapse in left_2"></div> 
    <div class="navbutton_background background_hover collapse left_2" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse left_2" style="height: 0;"></div> 
    <button class="navbutton leftborder rightborder left_2">Servers</button> 
</a> 

<a href="contact.php"> 
    <div class="navbutton_background background_normal collapse in left_3"></div> 
    <div class="navbutton_background background_hover collapse left_3" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse left_3" style="height: 0;"></div> 
    <button class="navbutton leftborder rightborder left_3">Contact</button> 
</a> 

<a href="about.php"> 
    <div class="navbutton_background background_normal collapse in left_4"></div> 
    <div class="navbutton_background background_hover collapse left_4" style="height: 0;"></div> 
    <div class="navbutton_background background_click collapse left_4" style="height: 0;"></div> 
    <button class="navbutton leftborder left_4">About</button> 
</a> 

</div> 

CSS:

#nav_bar 
{ 
background-color: rgba(27, 27, 27, 1); 

width: 100%; 
height: 5rem; 

border-width: 10%; 

margin-top: 2rem; 

position: relative; 
} 

.navbutton 
{ 
background-color: rgba(0, 0, 0, 0); 
color: rgba(10, 10, 10, 1); 

font-weight: bold; 

width: 20%; 
height: 100%; 

position: absolute; 

z-index: 1; 

border: 0; 
border-bottom: 0.5rem solid rgba(0, 0, 0, 0.2); 
} 

.navbutton_background 
{ 
width: 20%; 
height: 100%; 

position: absolute; 
} 

/* Colors for button states */ 
.background_normal { background-color: rgba(40, 40, 40, 1); } 
.background_hover { background-color: rgba(0, 190, 220, 1); } 
.background_click { background-color: rgba(0, 210, 240, 1); } 

/* Left_# are for positioning each individual button 20*#% away from the left side */ 
.left_1 { left: 20%; } 
.left_2 { left: 40%; } 
.left_3 { left: 60%; } 
.left_4 { left: 80%; } 

.leftborder { border-left: 0.3rem dashed rgba(27, 27, 27, 1); } 
.rightborder { border-right: 0.3rem dashed rgba(27, 27, 27, 1); } 

JS:

$(document).ready (function() { 
    $("#nav_bar a").mouseover (function() { 
     $(this).find (".background_normal").collapse ('hide'); 
     $(this).find (".background_hover").collapse ('show'); 
    }); 
    $("#nav_bar a").mouseout (function() { 
     $(this).find (".background_hover").collapse ('hide'); 
     $(this).find (".background_normal").collapse ('show'); 
    }); 
}); 

EDIT: Я нашел обходной путь к этому вопросу, но я не действительно считают это ответом, так как это никоим образом не мешает или не фиксирует это. В итоге я добавил еще один элемент ниже остальных, который изменил цвет на mouseover/mouseout, чтобы имитировать элемент, который не рушился правильно. Обновлено скрипку: https://jsfiddle.net/exr4hv8z/3/

Answer 1

Используйте вместо этого:

$(document).ready (function() { 
    $("#nav_bar a").hover (function() { 
     $(this).find (".background_normal").collapse ('hide'); 
     $(this).find (".background_hover").collapse ('show'); 
    }, 
    function() { 
     $(this).find (".background_hover").collapse ('hide'); 
     $(this).find (".background_normal").collapse ('show'); 
    }); 
});