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

Bootstrap折叠用于隐藏，但不显示

1 个答案: