html - :hover is inconsistent and very jittery on absolutely positioned element

Question

我有一个绝对定位的容器，用于存放标记标签。这些标签部分覆盖了它们下方的图像。当用户将鼠标悬停在该容器上时，我希望容器内的标记标签消失。

下面几乎可以工作，但是效果不一致，并且在将鼠标悬停在容器上时非常紧张:

.main-container{
  height:200px;
  width:100%;
  background-color:#ccc;
  position:relative;
}

.slider-tag-container{
    z-index: 10;
    position: absolute;
    bottom: 22px;
    left: 20px;
    padding-top:30px;
    padding-right:30px;
}
.slider-tag-container .label{
  border: 2px solid #fff;
  margin-right:5px;
}

.slider-tag-container:hover  .label{
    display:none;
} 

<div class="main-container">
  <div class="slider-tag-container">
    <div class="label label-primary">Some tag</div>
  </div>
</div>

这是一个jsFiddle

为什么会出现这种“紧张不安”？

怎样才能顺利达到想要的效果？

Answer 1

为包装器元素指定一个min-width 或width。 display:none 的内部元素可能会将包装器折叠到 0px 0px。

此外，如果您设法在触发之前将光标移到内部元素上，:hover 冒泡可能会出现问题。我认为 JS 解决方案可能是最好的选择，因为它可以更好地控制它的行为方式。