jquery - 具有 CSS-toggle-effect 的响应式 DIV : Strange behaviour in Firefox, 所有其他浏览器都可以吗？

Question

我用Jquery制作了一个菜单，其中包含一些文字和图片。它在除 Firefox 之外的所有浏览器中都能正常工作。如果您将鼠标悬停在第三个元素上(始终是最后一个元素，因为每个元素的宽度约为 30%)，则会发生一种我无法解释的奇怪效果。

你能看一下我的 fiddle 吗？你能帮我解决这个问题吗？非常感谢提前:-))

$(document).ready(function() {
    $(".lvl3 li a").hover(function() {
        $(this).find(".lvl3-hover").toggle(10);
        $(this).find(".lvl3-pic-hover").toggle(10);
        $(this).find(".lvl3-title-hover").toggle(10);
        $(this).find(".lvl3-title").toggle(10);
        $(this).find(".lvl3-subtitle-hover").toggle(10);
        $(this).find(".lvl3-subtitle").toggle(10);
        $(this).find(".lvl3-projektdetails").toggle(10);
    });
});

see my fiddle

编辑:

这是我首先尝试的，仅切换 <div>应该出现在悬停时。闪烁效果更好，但是当我将鼠标悬停在第三个元素上时(也许您必须稍微调整浏览器窗口的大小才能看到它)，我的菜单中有一个奇怪的“跳跃”。

我花了几个小时尝试解决这个问题，但还没有找到解决方案。

您能再检查一下吗？

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

Answer 1

我也可以在 Chrome 中重现该问题，尽管我看到元素跳跃(和返回)速度更快。我相信这是由于浮点舍入错误造成的，但说实话，HTML、CSS 和 JavaScript 过于复杂，我认为更简单的解决方案不仅仅涉及对某些长度值进行舍入。因此，尽管这可能不完全是您所追求的，但我在 Firefox 和 Chrome 中看到了预期的行为。不幸的是我无法测试 IE。

jsFiddle demo

我整理/弄乱了 HTML 和 CSS，仅使用 :hover 来解决问题。悬停效果的伪类并对所有百分比长度进行四舍五入，因此它不会是完全相同的布局。

此外，无需任何 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>

CSS

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

另请注意，标记将受益于进一步的整理，我也希望使用更具语义的标记，例如使用标题元素而不是 <div>样式为标题。

希望这有帮助。