引导崩溃的作品藏起来，但不显示

Question

总之，这种情况正在发生：https://jsfiddle.net/exr4hv8z/2/（尝试将鼠标悬停按钮，然后移动鼠标了几次）

无论出于何种原因，要素崩溃，找个地方藏起来就好了，但另一个元素，应该崩溃在视图不会动画，只要一旦其他元素完成弹出。

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'); 
    }); 
}); 

编辑：我找到了一个解决方法问题，但我不真的认为它是一个答案，因为它不以任何方式阻止或修复此问题。我最终在其他元素下面添加了另一个元素，它在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'); 
    }); 
});