3

Jqueryでいくつかの単語と写真を含むメニューを作成しました。Firefoxを除くすべてのブラウザで正常に動作します。3番目のアイテム（すべてのアイテムの幅が約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>、ホバーに表示されるはずのものを切り替えるだけでした。ちらつきはそれよりも優れていますが、3番目の要素にカーソルを合わせると（ブラウザウィンドウのサイズを少し変更して表示する必要があるかもしれません）、メニューに奇妙な「ジャンプ」があります。

私はこれを取り除くために何時間も努力していますが、まだ解決策を見つけられませんでした。

これをもう一度確認してもらえますか？

$(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デモ

:hoverホバー効果に疑似クラスを使用し、すべてのパーセンテージの長さを丸めるだけで問題を解決するために、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>

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 に答える