悬停时的 Divi 投资组合标题答案

【问题标题】：Divi portfolio title on hover悬停时的 Divi 投资组合标题
【发布时间】：2017-02-14 04:55:25
【问题描述】：

我想知道代码有什么问题。我为 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; }

【问题讨论】：

标签： jquery html css hover

【解决方案1】：

这将解决它：

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

【讨论】：

感谢 Andrei，将指针事件设置为无，这不会导致任何其他问题吗？
理论上可以。 <a> 中的 <h2> 将不再接收任何指针事件（点击）。但在实践中，它的所有事件都会传递给它下面的东西。这是一个包裹在另一个锚点中的图像，具有相同的链接。所以不，实际上什么都不会改变。
感谢 Andrei，提供解决方案和简要说明。
或者，您可能希望在代码中将 .et_pb_portfolio_0 .et_portfolio_image:hover img 选择器更改为 .et_pb_portfolio_0 .et_portfolio_item:hover img，但我无法准确告诉您在哪里，因为您（或主题）正在使用优化器插件它缩小了它。如果它不是你的代码并且它是 Divi 的一部分，你不应该触摸它。不客气。
我是这么想的，所以才这么说。在容器上移动:hover 更健康。我最初提出的虽然有效，但毕竟是禁用功能。因此，本质上是错误的。在这种特殊情况下碰巧没有不利影响的黑客攻击。

【解决方案2】：

最好的方法是将您的 h2 标签插入“et_portfolio_image”类跨度标签中。它会解决你的问题。

【讨论】：

在高级主题中更改标记结构并不像看起来那么容易。该标记已生成。