时间戳

首页 > 解决方案 > 为什么当光标在顶部时，悬停时出现的div开始闪烁？

jquery - 为什么当光标在顶部时，悬停时出现的div开始闪烁？

问题描述

所以我有3个div。一个是父容器，在悬停时，其他 2 个容器应该出现在父容器的顶部。一个容器只是一些文本和黑色背景，另一个只是渐变黑色背景。

我遇到的问题是，当我将鼠标悬停在一个带有文本的子容器上时，它开始闪烁，我不知道为什么。

此外，由于某种原因，我的 codepen 中的子 div 出现在整个窗口上，而不仅仅是父 div。但主要问题是闪烁。

<div class="masonry-grid">
  <div class="asset-container" style="border: 1px solid rgb(71, 71, 75); margin: 5px; padding: 5px; margin:auto; width:200px;display:block"">
      <div class=" show-hover"></div>
      <img src="https://images.unsplash.com/flagged/photo-1593005510329-8a4035a7238f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHw%3D&w=1000&q=80" class="img-responsive center-img" style="position: relative; width:200px;">
      <div class="asset-title">
        filename
        size: 1mb
        <br>
        tag count: 1 Tag
        <br>
        uploaded: yesterday
      </div>
  <div class="masonry-footer"><span class="h5 card-title">description</span></div>
</div>

.asset-title{
  display:none;
  position:absolute;
  top:20px;
  left:-100px;
}

.show-hover:hover ~ .asset-title {
  display:block;
  left:0;
  padding-left:13px;
  margin-left:10px;
  padding-right:8px;
  padding-top:6px;
  padding-bottom:5px;
  z-index:30;
  background-color: rgba(0,0,0,0.6);
}

.show-hover{
  width:100%;
  height:100%;
  position: absolute;
  z-index: 29;
  top: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(0,0,0,1) 32%, rgba(0,0,0,0.5284488795518207) 100%);
  opacity:0;
}

.show-hover:hover{
  opacity: 1;
  left:0;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

https://codepen.io/benjermann/pen/YzpJJXN

标签： jquerycss

解决方案

因为 '.show-hover' 和 '.asset-title' 是兄弟元素。

你把'.show-hover:hover ~.asset-title'和'.show-hover:hover'当鼠标悬停在'.asset-title'上时被取消。

发生这种情况时，“.asset-title”的显示变为无，“.show-hover:hover”被激活。

它看起来像在闪烁，因为它无限期地重复这个过程。

要解决此问题，我建议将悬停应用到父元素。

最后，如果你想把'position:absolute'元素放在父元素里面，你可以使用'position:relative'。

.asset-container {
    position: relative;
}

.asset-title {
    display: none;
    position: absolute;
    top: 20px;
    padding-left: 13px;
    margin-left: 10px;
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 5px;
    z-index: 30;
    background-color: rgba(0, 0, 0, 0.6);
}

.asset-container:hover .asset-title {
    display: block;
}

.show-hover {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 29;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 32%, rgba(0, 0, 0, 0.5284488795518207) 100%);
    opacity: 0;
}

.asset-container:hover .show-hover {
    opacity: 1;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}
<div class="masonry-grid">
    <div class="asset-container" style="border: 1px solid rgb(71, 71, 75); margin: 5px; padding: 5px; margin:auto; width:200px;display:block">
        <div class=" show-hover"></div>
        <img src="https://images.unsplash.com/flagged/photo-1593005510329-8a4035a7238f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHw%3D&w=1000&q=80" class="img-responsive center-img" style="position: relative; width:200px;">
        <div class="asset-title">
            filename
            size: 1mb
            <br>
            tag count: 1 Tag
            <br>
            uploaded: yesterday
        </div>

        <div class="masonry-footer"><span class="h5 card-title">card title</span></div>
    </div>
</div>

推荐阅读