如何使包含 div 不影响悬停在父 div 上

Posted

技术标签:

【中文标题】如何使包含 div 不影响悬停在父 div 上【英文标题】:How to make contaning div not to affect hover on parent div 【发布时间】:2019-10-17 04:35:45 【问题描述】:

我有 .img-wrapper 父 div,其中包含不同的 div,并且由于 div .button-holder 从底部向下 50px 并且它也绝对定位它导致覆盖父 div 之后的元素,在这种情况下, p 元素使父 div 的悬停效果处于活动状态,即使悬停在 p 元素上也是如此。希望你明白我的意思。 我该如何解决这个问题?

html:

  <div class="w-full px-10 md:px-2 py-10 teammember_big text-left">
        <div class="img-wrapper relative hover:cursor-pointer">
          <img class="w-full block" :src="teammember.picture">
          <div class="img-overlay"></div>
          <div class="work-overlay"><div class="work-description"><div class="work-title" v-text="teammember.title"></div><div class="work-phone"><span>M:</span> <a :href="'tel:' + teammember.phone_number"><span v-text="teammember.phone_number"></span></a></div><div class="work-email"><span>E:</span> <a :href="'mailto:' + teammember.email"><span v-text="teammember.email"></span></a></div></div></div>
          <div class="button-holder"><a class="button">BIO & DETAILS</a>
          </div>
          </div>
        <p class="text-black text-center name" v-text="teammember.name"></p>
        <!--<p class="text-black title" v-text="teammember.title"></p>
        <p class="text-black bio" >Bio & Details</p>-->
      </div>

还有一些用SCSS写的相关CSS:

.teammember_big 
 .img-overlay 
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: background-color 0.25s ease-in-out;

.work-overlay 
 font-family: National-Book;
 border: none;
 background-color: transparent;
 padding: 0;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 backface-visibility: hidden;
 transition: transform 0.15s, opacity 0.15s linear;
 text-align: center;

.button-holder 
 opacity: 0;
 position: absolute;
 top: auto;
 bottom: 0;
 left: 0;
 right: 0;
 text-align: center;
 transition: transform 0.35s;
 transform: translate3d(0, 50px, 0);
 

.teammember_big .img-wrapper:hover .img-overlay 
  background-color: rgba(37, 37, 39, 0.8);
 
.teammember_big .img-wrapper:hover .work-overlay 
  opacity: 1;
  transition: transform 0.35s, opacity 0.35s linear;
  transform: translate3d(0, 20%, 0);
 
 .teammember_big .img-wrapper:hover .button-holder 
  opacity: 1;
  transition: transform 0.45s, opacity 0.45s linear;
  transform: translate3d(0, -30px, 0);
 

【问题讨论】:

如果父 div 有一个悬停事件,那么悬停在任何子元素上都会触发该事件。 我试图在一个孩子上添加悬停,img,但它没有那样工作。 【参考方案1】:

我没有完全得到您想要获得的结果,但您为什么不直接使用简单的margin-top: 50px 而不是translate? 这样可以防止元素溢出容器。

【讨论】:

以上是关于如何使包含 div 不影响悬停在父 div 上的主要内容,如果未能解决你的问题,请参考以下文章

如何在父 div 中设置不透明度而不影响子 div? [复制]

在父级悬停上使跨度中的文本淡入

防止在父 Div 上触发 Div 的悬停事件?

当我将鼠标悬停在另一个 div 上时,如何使文本出现在一个 div 中?

使跨度中的文本在父悬停时淡入

当鼠标悬停在 DIV 上时,如何使某些控件可见并与 DIV 重叠? [关闭]