鼠標懸浮控制元素隱藏與顯示 - css中鼠標的hover狀態

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