Question

我正在尝试为我的MVC Web应用程序创建一个水平导航列表。每次我将鼠标悬停在菜单项上时，Jquery会显示背景图像，并在鼠标离开菜单项时隐藏它。但是，当我将鼠标放在菜单项上时，它会从菜单项中移动超链接。我用jFiddle制作了一个非常糟糕的版本，但仍然可以解决我的问题：jsFiddle example

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

});

Answer 1

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

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

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

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

将鼠标悬停在菜单项上时，HyperLink会移动。

1 个答案: