Html 如何使contaning div不影响悬停在父div上
我有一个Html 如何使contaning div不影响悬停在父div上,html,css,vue.js,tailwind-css,Html,Css,Vue.js,Tailwind Css,我有一个.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="im
.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>
我不太明白你想要得到的结果,但是你为什么不使用一个简单的
边距顶部:50px
而不是翻译
?
这将防止元素溢出容器。如果父div有一个悬停事件,则悬停在任何子元素上都将触发该事件。我尝试将悬停添加到子元素img上,但没有这样做。
.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);
}