2

MVC Web アプリケーションの水平ナビゲーション リストを作成しようとしています。また、メニュー項目にカーソルを合わせるたびに、Jquery は背景画像を表示し、マウスがメニュー項目を離れると非表示にします。ただし、メニュー項目にマウスを置くと、メニュー項目内からハイパーリンクが移動します。私は jFiddle でかなり悪いバージョンを作成しましたが、それでも私の問題を悔い改めることができます: jsFiddle の例

HTML

<div id="header">
    <div id="navlist"> <a href="@Url.Content("~")" id="current"></a>
        @*<li><a href="/Product/">Products</a></li>*@
        <div style="margin-left: 37px;">
            <div class="Aboutbg">
                <div class="About"></div>
            </div> <a href="#" class="aboutus">Aboutus</a>

            <div class="Aboutstar"></div>
        </div>
    </div>
</div>

CSS

#header {
    background: url(../Images/Template%20Images/MenuBanner.png) no-repeat;
    background-size: 100% 100%;
    float: left;
    margin-left: -17px;
    margin-top: 65px;
    padding-bottom: 10px;
    width: 102%;
}
#navlist {
    float: left;
    margin-left: 360px;
}
#navlist a {
    padding: 10px;
    color: black;
    text-decoration: none;
    float: left;
    z-index: 2;
}
#current {
    background-image: url(../Images/Template%20Images/HomeIcon.png);
    height: 15px;
    width: 10px;
    margin-top: 10px;
    background-repeat: no-repeat;
}
#next {
    height: 2px;
    padding: 7px;
    width: 3px;
    float: left;
    margin-top: 22px;
    color: #666666;
    font: 18px/27px'OpenSansExtrabold', Arial, sans-serif;
    font-size: 70%;
    font-weight: 800;
}
.Aboutbg {
    background-image: url(../Images/Template%20Images/aboutbg.png);
    padding: 4px;
    width: 94px;
    height: 25px;
    float: left;
    margin-top: 10px;
    background-repeat: no-repeat;
}
.About {
    background-image: url(../Images/Template%20Images/About_usIcon.png);
    height: 2px;
    padding: 7px;
    width: 3px;
    float: left;
    margin-left:2px;
    margin-top: 5px;
    background-repeat: no-repeat;
}
.Aboutstar {
    background-image: url(../Images/Template%20Images/starIcon.png);
    height: 2px;
    padding: 7px;
    width: 3px;
    float: left;
    margin-top: 19px;
    margin-left:-17px;
    background-repeat: no-repeat;
}
.aboutus {
    height: 2px;
    width: 3px;
    margin-left:10px;
    margin-top: 9px;
}

jQuery

$(document).ready(function () {
    $(".aboutus").mouseover(function () {
        $(".Aboutbg").show();
        $(".About").show();
        $(".Aboutstar").hide();

    });

    $(".aboutus").mouseout(function () {
        $(".Aboutbg").hide();
        $(".Aboutstar").show();
    });

});
4

1 に答える 1

2

あなたはdiv.Aboutbgを隠しており、ホバーするとこれが表示されます

$(".aboutus").mouseover(function () {
    $(".Aboutbg").show();
    ....

これは、リンクの前に HTML に表示され、右に「ジャンプ」します。.aboutus

おそらくより良い方法 (マウスオーバー効果を探している場合) から.Aboutbgボタンにスタイルを適用することですが、CSS:hover状態で、jQuery の必要性を取り除きますか?

于 2013-10-15T12:07:38.877 に答える