单击悬停时显示的元素

Question

我们假设我有一个有两个孩子的div：

<div class="parent">
  <div class="child"></div>
  <div class="sibling"></div>
</div>

假设当我悬停在'孩子'上时，会显示其兄弟姐妹。 还假设当我点击“兄弟”时，会出现一个警告。

然而，当我的鼠标在兄弟姐妹身上时，它会开始打开和关闭，点击它几乎是不可能的，你可以看到。

他是一个复制'问题'的小提琴： https://jsfiddle.net/7febqymt/

防止兄弟姐妹闪烁的最佳方法是什么，从而轻松实现点击？

Answer 1

悬停/切换效果不需要JS。只需将此行添加到CSS中即可执行悬停效果并修复闪烁：

.child:hover + .sibling, .sibling:hover {display:block;}

请参阅更新的小提琴：https://jsfiddle.net/7febqymt/1/

Answer 2

将'兄弟姐妹'放在'孩子'里面：

<div class="parent">
  parent
  <div class="child">
    hover me
    <div class="sibling">
    click me
  </div>
  </div>
</div>

Answer 3

使用.show()：

$('.sibling').show();

PLUNKER