マウス懸濁制御要素の非表示と表示-cssでのマウスのhover状態

需要:マウスが1つの要素Aに移動すると、別の要素Bが表示されます.実現原理:

A要素はB要素と同じ親を持つ.

B要素はデフォルトで非表示で、A要素はデフォルトで表示されます.

マウスがA要素に移動すると、A要素の親に移動したとみなすこともできます.A要素の親は、マウスのhover状態を取得します.

css:.father:hover .b { display:block }を使用して、マウスが親に移動したときのB要素のスタイルを定義します.

htmlのサンプルコード:

<div class="father">
    <div class="brother-showing">
        ....
    <div>
    <div class="element">
        .....
    div>
div>

以上の例のコードは、基本的なhtml構造を示すだけで、実際にはdivまたはspanまたは他のラベルを使用するかは、状況によって異なります.
cssコード:

.element{
    display:none; //        
}

//         brother-showing ，       father   。    hover  ，   hover     element   ：
.father:hover .element{
    display:block ;
}