1

このJSFiddleを検討してください

Span1 で mouseenter すると、Span1 の下に青いバーが表示されます (Span2 と Span3 も同様)。

ただし、 Span1 または Span2 または Span3 でマウス入力しても、青いバーは Span2 の下にのみ表示されます。

CSS

div.demo {
    display:table;
    width:100%;
}
div.demo div {
    display:table-cell;
    text-align:center;
}
.under {
    width:100px;
    height:2px;
    background-color:blue;
    margin:0px auto;
    display:block;
}

HTML

<div class="demo">
    <div id='span1'>Span 1</div>
    <div id='span2'>Span 2</div>
    <div id='span3'>Span 3</div>
</div>
<div class="demo">
    <div><span id='Span1'></span></div>
    <div><span id='Span2'></span></div>
    <div><span id='Span3'></span></div>
</div>

JS

$(document).ready(function(){
    $('#span1').mouseenter(function(){
        $('#Span1').addClass('under');
    });
    $('#span2').mouseenter(function(){
        $('#Span2').addClass('under');
    });
    $('#span3').mouseenter(function(){
        $('#Span3').addClass('under');
    });
    $('#span1').mouseleave(function(){
        $('#Span1').removeClass('under');
    });
    $('#span2').mouseleave(function(){
        $('#Span2').removeClass('under');
    });
    $('#span3').mouseleave(function(){
        $('#Span3').removeClass('under');
    });

});
4

3 に答える 3

2

ホバーする前にセルに幅がありません

JSFiddle の作業はこちら: http://jsfiddle.net/F2smc/5/

div.demo div {
    display:table-cell;
    text-align:center;
    width: 33%;   // <<< Added this
}

基本的に、他の 2 つのセルは幅がゼロであるため、2 行目は真ん中で非常に狭いものに折りたたまれているため、オプション 2 のみのように見えます。

より良い例: http://jsfiddle.net/F2smc/29/

スパンの代わりにこの CSS を追加するだけで、正確な % 幅を指定しなくても同じ効果を得ることができます (そのため、親 div 内で折りたたまれません)。

div.demo span
{
    width:100%;
}

div に独自の色を付けると、何が起こっているのかが明らかになります。div の 100% は、div がテーブルのようにそれを使用することを意味しません。基本的に、下線の div/span に幅を適用する変更はすべて機能します。F12 デバッグ モードで Chrome を使用してこのタイプの作業を表示することをお勧めします。これは、元の要素がすべて幅 0 であることを明確に示しているためです。

PS。場合によってのみ異なる ID を使用するのは本当に悪い考えです。

別のメモで：

通常、JQuery では、すべてのイベントがほぼ同じことを行う場合に、異なる ID ごとにイベントを固定することはありません。ID を (大文字と小文字だけでなく) 本当に一意になるように変更すると、次のようなことができます。

$(document).ready(function () {
    $('.menu').hover(function () {
        $('#' + this.id + '-l').addClass('under');
    }, function () {
        $('span').removeClass('under');
    });
});

現在ホバーされているアイテムのIDを取得し、一意のものを追加してから、一致するアイテムをIDで更新します。

実際のデモ: http://jsfiddle.net/F2smc/30/

これにより、元の構造を維持しながらクリーンアップされるはずです。

于 2013-09-10T10:51:12.370 に答える