：悬停在绝对定位的元素上不一致并且非常紧张

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

为什么会出现这种"jittery-ness"？

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

Answer 1

给包装器元素一个 min-width 或 width。 display:none 的内部元素可能会通过 0px.

将包装器折叠成 0px

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

：悬停在绝对定位的元素上不一致并且非常紧张

:hover is inconsistent and very jittery on absolutely positioned element

html

css

css-position