Divi投资组合悬停标题 [英] Divi portfolio title on hover

问题描述

我想知道代码有什么问题。我为divi投资组合模块创建了一个自定义的悬停效果，并且其工作正常，直到您将鼠标悬停在图像或叠加层上，但只要您将鼠标悬停在标题上，图像就会响应。

I'm wondering whats wrong with the code. I created a custom hover effect for divi portfolio module and its working fine until you hover on the image or the overlay, but as soon as you hover on the title, the image responds.

请检查并帮助我们。我的代码在自定义悬停。将鼠标悬停在标题上以查看问题。 查看此链接

Please check and Help me guys. My code on custom hover. Hover on the title to see the issue. Check this link

.et_pb_portfolio_0 .et_overlay{
   height:80px;
   position: absolute;
   bottom: 0;
   left: 0;
   opacity:1;
   top:inherit;
   -webkit-transition: -webkit-transform 0.5s;
   transition:transform 0.5s;
   -webkit-transform: translate3d(0,80px,0);
   transform: translate3d(0,80px,0);
   z-index: 555;
}

.et_pb_portfolio_0 .et_pb_portfolio_item h2{
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 30px;
   text-transform: none;
   z-index: 556;
   font-size: 90%;
   overflow:hidden;
   opacity: 0;
   -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
   transition: opacity 0.5s, transform 0.5s;
   -webkit-transform: translate3d(0,50px,0);
   transform: translate3d(0,50px,0);
}

.et_pb_portfolio_0 .et_portfolio_image img {
   -webkit-transition: -webkit-transform 0.5s;
   transition: transform 0.5s;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden; 
} 
.et_pb_portfolio_0 .et_portfolio_image:hover img {
   -webkit-transform: translate3d(0,-30px,0); 
   transform: translate3d(0,-30px,0); 
} 

.et_pb_portfolio_0 .et_pb_portfolio_item:hover h2{ 
   opacity: 1; 
   -webkit-transform: translate3d(0,0,0); 
   transform: translate3d(0,0,0); 
} 

.et_pb_portfolio_0 .et_pb_portfolio_item:hover .et_overlay {
   -webkit-transform: translate3d(0,0,0); 
   transform: translate3d(0,0,0);
} 

.et_pb_portfolio_0 .et_pb_portfolio_item{ overflow:hidden; }

推荐答案

这将解决它：

.et_pb_portfolio_0 .et_pb_portfolio_item h2 {
   pointer-events: none; 
   cursor:pointer;
}

这篇关于Divi投资组合悬停标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！