Jquery 带有CSS切换效果的响应div：Firefox中的奇怪行为，所有其他浏览器都可以吗？

我用Jquery制作了一个包含几个单词和图片的菜单。它在除Firefox之外的所有浏览器中都能正常工作。如果将第三个项目悬停（始终是最后一个项目，因为每个项目的宽度约为30%），会出现一种奇怪的效果，我无法解释

你能看看我的小提琴吗？你能帮我解决这个问题吗？ 提前多谢：-）

编辑：

这是我第一次尝试的，只是切换应该出现在悬停上的

。闪烁效果更好，但当我将鼠标悬停在第三个元素上时（也许你必须稍微调整一下浏览器窗口的大小才能看到），我的菜单中出现了一个奇怪的“跳跃”

我花了好几个小时才解决这个问题，但还没有找到解决办法

你能再检查一下吗

$(document).ready(function() {
    $(".lvl3 li a").hover(function() {
        $(this).find(".lvl3-hover").toggle();
    });
});

---

我也可以在Chrome中重现这个问题，尽管我看到元素跳跃（和返回）更快。我相信这是由于浮点舍入错误造成的，但老实说，HTML、CSS和JavaScript过于复杂，我认为更简单的解决方案不仅仅是舍入一些长度值。所以，虽然这可能不是你想要的，但我看到了Firefox和Chrome的预期行为。不幸的是，我不能测试IE

为了解决这个问题，我对HTML和CSS进行了整理，只使用了用于悬停效果的伪类，并对所有百分比长度进行了四舍五入，因此它将不是完全相同的布局

此外，这可以解决没有任何JavaScript

HTML

<ul class="lvl3">
    <li>
        <a href="1" target="_self">
            <div class="lvl3-normal">
                <div class="lvl3-pic"></div>
                <div class="lvl3-title">Test</div>
                <div class="lvl3-subtitle">Frankfurt</div>
            </div>
            <div class="lvl3-hover"></div>
            <div class="lvl3-projektdetails">&rarr; Projektdetails</div>
        </a>
    </li>
    <li>
        <a href="1" target="_self">
            <div class="lvl3-normal">
                <div class="lvl3-pic"></div>
                <div class="lvl3-title">Test</div>
                <div class="lvl3-subtitle">Munich</div>
            </div>
            <div class="lvl3-hover"></div>
            <div class="lvl3-projektdetails">&rarr; Projektdetails</div>
        </a>
    </li>
    <li>
        <a href="1" target="_self">
            <div class="lvl3-normal">
                <div class="lvl3-pic"></div>
                <div class="lvl3-title">Test</div>
                <div class="lvl3-subtitle">Cologne</div>
            </div>
            <div class="lvl3-hover"></div>
            <div class="lvl3-projektdetails">&rarr; Projektdetails</div>
        </a>
    </li>
    <li>
        <a href="1" target="_self">
            <div class="lvl3-normal">
                <div class="lvl3-pic"></div>
                <div class="lvl3-title">Test</div>
                <div class="lvl3-subtitle">Hamburg</div>
            </div>
            <div class="lvl3-hover"></div>
            <div class="lvl3-projektdetails">&rarr; Projektdetails</div>
        </a>
    </li>
</ul>

另外请注意，标记将从进一步整理中受益，我还将考虑使用更具语义的标记，例如使用heading元素，而不是样式为title的

---

希望这能有所帮助。

目前还不确定问题出在哪里，但我认为CSS和jQuery过于复杂。您应该能够只更改父元素的

显示

，而不是操纵要悬停的所有元素的显示。这种方法也非常昂贵，并且在某些浏览器中会使悬停效果变慢。几乎可以肯定的是，

float

和浮点舍入错误的组合导致了跳跃元素。这需要在哪些浏览器中工作？对于不需要透明背景图像的悬停元素，有更清晰的解决方案。

<ul class="lvl3">
    <li>
        <a href="1" target="_self">
            <div class="lvl3-normal">
                <div class="lvl3-pic"></div>
                <div class="lvl3-title">Test</div>
                <div class="lvl3-subtitle">Frankfurt</div>
            </div>
            <div class="lvl3-hover"></div>
            <div class="lvl3-projektdetails">&rarr; Projektdetails</div>
        </a>
    </li>
    <li>
        <a href="1" target="_self">
            <div class="lvl3-normal">
                <div class="lvl3-pic"></div>
                <div class="lvl3-title">Test</div>
                <div class="lvl3-subtitle">Munich</div>
            </div>
            <div class="lvl3-hover"></div>
            <div class="lvl3-projektdetails">&rarr; Projektdetails</div>
        </a>
    </li>
    <li>
        <a href="1" target="_self">
            <div class="lvl3-normal">
                <div class="lvl3-pic"></div>
                <div class="lvl3-title">Test</div>
                <div class="lvl3-subtitle">Cologne</div>
            </div>
            <div class="lvl3-hover"></div>
            <div class="lvl3-projektdetails">&rarr; Projektdetails</div>
        </a>
    </li>
    <li>
        <a href="1" target="_self">
            <div class="lvl3-normal">
                <div class="lvl3-pic"></div>
                <div class="lvl3-title">Test</div>
                <div class="lvl3-subtitle">Hamburg</div>
            </div>
            <div class="lvl3-hover"></div>
            <div class="lvl3-projektdetails">&rarr; Projektdetails</div>
        </a>
    </li>
</ul>

html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
img {
    max-width: 100%;
    width: 100%;
    height: auto;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lvl3 a {
    text-decoration: none;
    padding: 0;
    margin: 0;
    display:block;
}

.lvl3 li {
    float: left;
    margin-left: 0.83%;
    margin-right: 0.83%;
    margin-bottom: 0.83%;
    width: 31%;
    position: relative;
}

.lvl3-normal {
    background-color: #f0f0f5;
    width: 100%;
    height: 0;
    padding-bottom: 83%;
}

.lvl3-hover {
    background-color:#ee7029;
    width: 100%;
    height: 0;
    padding-bottom: 53%;
    display: none;
    opacity:.8;
    position:absolute;
    top:0;
}

.lvl3-pic {
    width: 100%;
    height: 0;
    padding-bottom: 53%;
    background-image:url(http://p183853.webspaceconfig.de/uploads/media/objekt_10.jpg);
}

.lvl3-title {
    margin-left: 2%;
    margin-top: 3%;
    line-height: 30px;
    font-size: 14px;
    color: #ee7029;
    text-decoration: none;
    font-weight: bold;
}

.lvl3-subtitle {
    margin-left: 2%;
    font-size: 12px;
    color: #022236;
    text-decoration: none;
}

.lvl3-projektdetails {
    width: 80%;
    height: 30px;
    position: absolute;
    top: 0;
    margin: 20% 10% 0 10%;
    line-height: 30px;
    background-color: #333;
    text-align: center;
    font-size: 14px;
    color: #FFF;
    display:none;
}

a:hover .lvl3-hover, a:visited .lvl3-hover, a:hover .lvl3-projektdetails, a:visited .lvl3-projektdetails  {
    display: block;
}

a:hover .lvl3-normal, a:visited .lvl3-normal  {
    background-color:#ee7029;
}

a:hover .lvl3-title, a:visited .lvl3-title {
    color:#fff;
}