同じリスト内の他のリンクをホバリングすると、水平の背景線が移動する

Question

my jsfiddleをご覧になりますか？

ご覧のとおり、アクティブなリスト項目のアンカーの下に水平線を引いた。
水平線をアンカーの下端**に置いてください。ちょうどカーソルがある場所ではなく、ホバリング時の境界線のようにしてください。誰か助けてくれますか？

ありがとうございました！種類に関して
、
ジョナサン

Answer 1

問題がありますアニメーション。代わりに、を含んでいる要素の内側に、より低いZ-インデックスを使用して、mouseoverイベントをインターセプトするのを止めます。

HTML：

<div id="container"> 
    <ul> 
     <li><a href="#">sub nav</a></li> 
     <li><a href="#">sub nav</a></li> 
     <li><a href="# "class="active">sub nav</a></li> 
     <li><a href="#">sub nav</a></li> 
    </ul> 
</div> 

改正のjavascript：

var animation = $('<div>').css({ 
    'position': 'absolute', 
    'height': active.outerHeight()-1, 
    'width': active.outerWidth(), 
    'marginTop': (active.parent().index() * active.outerHeight()), 
    'borderBottom': '1px solid #000', 
    'z-index': -10 
}); 

Example fiddle

また、あなたはそれらを表示する行のul li a要素のborder-bottomを透明にする必要があります。必要に応じてmargin-bottom: 1pxを使用できます。

Answer 2

ないあなたが達成しようとしているが、それは単にアクティブ<li>要素の下の行を取得していた場合、その後this jsfiddleが仕事を行う可能性があります正確に何を確認してください。

は、これは、いくつかの単純化されたjQueryを使って、下線を適用するために、あなたのCSSを使用しています：あなたはそれがulのマウスオーバーを停止し、逆転されたラインのli要素を使用していたので、

$(document).ready(function() { 
    $('ul').mouseout(function(){ 
     $(this).removeClass('active'); 
    }). 

    $('ul > li').mouseenter(function(){ 
     $(this).addClass('active'); 
    }); 
}); 

Answer 3

アニメーションliは、他のリスト要素より高いzインデックスを持つという問題があります。リンクから白い枠線を削除する必要があります。

このバイオリンを見てみましょう：http://jsfiddle.net/YFUsJ/12/

CSS：お返事LordSauceため

ul li { 
    display: block; 
    position:relative; 
    z-index:1; 
} 
ul li a { 
    text-decoration: none; 
    height: 30px; 
    line-height: 30px; 
    display: block; 
    padding:5px; 
    color: #555; 
    font-size: 1.4em; 
}