Question

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

请检查并帮助我们。我自定义悬停的代码。将鼠标悬停在标题上以查看问题。 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; }

Answer 1

这将解决它：

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

Answer 2

最好的办法是将你的h2标签插入＆＃34; et_portfolio_image＆＃34; class span标签。它会解决你的问题。

Divi投资组合称号悬停

2 个答案: