將鼠標懸停在菜單項上時移動超鏈接。

我想爲我的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

將鼠標懸停在菜單項上時移動超鏈接。

回答

相關問題