3

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

你能看看我的小提琴，你能帮我解决这个问题吗？非常感谢提前:-))

$(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);
    });
});

看我的小提琴

编辑：

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

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

你能再检查一下吗？

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

1 回答 1

0

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

jsFiddle 演示

我整理/弄乱了 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>样式作为标题。

希望这可以帮助。

于 2013-02-12T10:39:55.727 回答