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

.Aboutbg您隐藏了 div ，并且在悬停时显示为

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

这出现在链接之前的HTML 中，.aboutus导致它“跳转”到右侧。

也许更好的方法（如果您正在寻找鼠标悬停效果）是将样式从应用.Aboutbg到按钮，但在 CSS:hover状态 - 从而消除对 jQuery 的需要？

于 2013-10-15T12:07:38.877 回答