: зависание несовместимо и очень неустойчиво на абсолютно позиционированном элементе

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

Дайте оберточный элемент a min-width или width. Внутренний элемент, идущий display:none, вероятно, обрушивает обертку на 0px на 0px.

Кроме того, может возникнуть проблема с пузырьками :hover, если вам удастся навести курсор на внутренний элемент до его запуска. Я думаю, что решение JS может быть лучше всего для большего контроля над тем, как он себя ведет.