我在主blurb元素上创建了一个名为.projects-gallery
, 然后在Divi主题选项中,我添加了这个CSS
.projects-gallery .et_pb_blurb_container {
display: none;
}
.projects-gallery:hover .et_pb_blurb_container {
display: block;
}
原因是,
.et_pb_blurb_container
正在占用空间,您无法隐藏它,因为这样,项目标题将不会显示。使用上面的代码,当有人悬停在特定项目上时,可以隐藏它,然后显示它。您需要一个自定义类,这样就不会弄乱页面的其余部分。
如果您像我一样将它们放在单独的行上,并且希望删除行之间的边距,那么divi将应用line-height:1
到body
, 要删除它
.projects-gallery{
line-height:0;
}
结果
并在将鼠标悬停在图像上时保留动画
.projects-gallery:hover{
line-height:1;
}