怎么样实现当鼠标移动到一个地方, 一个隐藏的元素显示?

pre-requests Link to heading

  1. A 元素和 B 元素有相同的父亲
  2. B 默认隐藏, A 默认显示
  3. 当鼠标移动到 A 身上, A 的父亲获得 hover 的状态

.father:hover .b 来实现.

例子 Link to heading

<div class="father">
    <div class="brother-showing">
        ....
    <div>
    <div class="element">
        .....
    </div>
</div>
.element{
    display:none; //元素默认是隐藏的
}

//当鼠标经过兄弟元素brother-showing时也就是经过父级father的时候父级获得hover状态在父级hover的基础上写element的样式
.father:hover .element{
    display:block ;
}

credit to Link to heading

鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态