Question

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

以下几乎可以正常工作但是当悬停在容器上时效果不一致且非常紧张：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这是jsFiddle

为什么这个＆＃34; jittery-ness＆＃34;发生吗

如何顺利达到预期的效果？

Answer 1

为包装器元素添加min-width或width。内部元素display:none可能会将包装器折叠到0px 0px。

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

：悬停是不一致的，对绝对定位的元素非常紧张

1 个答案: