html - 2 Div の 1 つが非表示になり、2 番目のホバー時に表示されます

Question

2 つの div が隣り合っており、それらを div A と div B と呼びましょう

Div B を非表示にしたいのですが、div a にカーソルを合わせると div b が表示され、ホバーを離すと消えます.... 何を入れたらよいかわかりません。

score 8 · Accepted Answer

次のような HTML を使用します。

<div class="a">
   This is div a.
</div>
<div class="b">
   This is div b.
</div>

次のように CSS を使用できます。

.b {
  display:none;
}
.a:hover + .b {
  display:block;
}

したがって、B div はで非表示にdisplay:noneなっていますが、A div にカーソルを合わせると、で表示されdisplay:blockます。

注: DOM 内で div が直接隣接していない場合、同じ効果を得るには、+を aに置き換える必要があります。~

score 1 · Accepted Answer

要素が兄弟 (または親子) でない場合、純粋な CSS は使用できません。jQuery(ish) タグを含めたので、次のようにできます。

$('#a').on('mouseover', function() { $('#b').show(); });
$('#a').on('mouseout', function() { $('#b').hide(); });

score 0 · Accepted Answer

他の回答が示唆するように、CSS だけでそれを行うことができます。

しかし、この非表示と表示中にさらに多くのことをしたい場合 (例えば、フェードアニメーション、スライドアニメーション、またはその他の jQuery のもの)、これは jQuery で行うことができる方法です:

$('#a').hover( 
    function() { $('#b').fadeIn() },
    function() { $('#b').fadeOut() }    
);

jQuery の.hover()には、表示用と非表示用の 2 つのハンドラーを受け入れるバリアントがあります。

3 に答える 3