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

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

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>

jQuery

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

    });

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

});

---

您隐藏了div

.Aboutbg

，悬停时，它会显示为

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

这会出现在HTML中

.aboutus

链接之前，导致它“跳转”到右侧

---

也许更好的方法（如果您正在寻找鼠标悬停效果）是将

.Aboutbg

中的样式应用于按钮，但在CSS

中：悬停

状态-从而消除对jQuery的需要？

毫无疑问，这不起作用，因为我必须隐藏从jQuery中可以看到的其他两个图像。我有它在这个网站的另一个版本的工作，但我在这里编码不同。

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