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

我想为我的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(); 
    }); 

});

来源

2013-10-15 user2708073

您已经隐藏的div .Aboutbg和，悬停这用

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

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

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

来源

2013-10-15 12:07:38

不幸的是，这不起作用，因为我不得不隐藏其他两张图片，你可以从jQuery中看到。我有它在这个网站的另一个版本的工作，但即时编码它在这里不同。 – user2708073

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

回答

相关问题