需求：當滑鼠移動到一個元素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 ;
}