3

私のjsfiddleを見ていただけませんか？

ご覧のとおり、アクティブなリストアイテムのアンカーの下に水平線を配置しました。
カーソルが立っている場所ではなく、ホバーしたときの境界線の下部のように、水平線をアンカーの下部**に配置したいと思います。誰かが私を助けることができますか？

よろしくお願いします！
よろしく、
ジョナサン

4

3 に答える 3

3

問題はli、のマウスオーバーを停止しulてアニメーションを反転させていた行に要素を使用していたためです。代わりにdiv、マウスオーバーイベントのインターセプトを停止するために、より低いz-indexを持つ要素を含む内部を使用します。

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
});

フィドルの例

また、線が透けて見えるように、要素をborder-bottom透明にする必要があります。ul li a必要に応じて使用できmargin-bottom: 1pxます。

于 2012-05-03T09:53:32.750 に答える
0

何を達成しようとしているのか正確にはわかりませんが、アクティブな<li>要素の下に行が表示されているだけの場合は、このjsfiddleが機能する可能性があります。

cssを使用して、いくつかの簡略化されたjQueryを使用してアンダースコアを適用します。

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

    $('ul > li').mouseenter(function(){
        $(this).addClass('active');
    });
});
于 2012-05-03T09:51:41.637 に答える
0

問題は、アニメーションliのz-indexが他のリスト要素よりも高いことです。そして、リンクから白い境界線を削除する必要があります。

このフィドルを見てください：http：//jsfiddle.net/YFUsJ/12/

CSS：

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;
}
于 2012-05-03T09:59:27.640 に答える