将鼠标悬停在菜单项上时，超链接会移动。答案

【问题标题】：HyperLink moves when hovering over menu item.将鼠标悬停在菜单项上时，超链接会移动。
【发布时间】：2013-10-15 20:52:15
【问题描述】：

我正在尝试为我的 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();
    });

});

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

这出现在 HTML 之前 .aboutus 链接导致它“跳”到右边。

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

【讨论】：

不幸的是，这不起作用，因为我必须隐藏您可以从 jQuery 中看到的另外两个图像。我让它在这个网站的另一个版本上工作，但我在这里用不同的方式编码。