hover一个div时显示另一个div不生效/抖动/闪屏问题

hover一个div时显示另一个div不生效/抖动/闪屏问题

参考大神博客，这里做个记录 https://www.cnblogs.com/don-yang/p/9468958.html

两个div之间的关系存在三种情况：

1. 父子关系
2. 兄弟关系
3. 兄弟的子孙关系

实现办法

1. 父子关系

 /* 情景一：两个是兄弟元素 */
    .box:hover+.change {
      color: red;
    }

2. 兄弟关系

/* 情景二：两个是父子元素 */
    .box:hover .change {
      color: red;
    }

3. 兄弟的子孙关系

/* 情景三：两个是兄弟元素,改变的是一个兄弟元素的子元素 */
    .box:hover+#c>.change {
      color: red;
    }

对于hover一个div时抖动/频闪问题

建议将两个div放在一个父div中，并给这个父div增加hover效果。

示例

<div class="demo">
   <div class="div1">1</div>
   <div class="div2">2</div>
</div>

.demo:hover .div1{
    display: block;
}
.demo:hover .div2{
    display: none;
}