如何关闭Owl Carousel 2.2.1的图片悬停显示效果？

核心思路 #

这类悬停显示背景图的效果，大多是通过CSS的:hover伪类控制图片的透明度或可见性实现的，我们只需要修改默认状态的CSS规则，让背景图一直显示即可。

操作步骤 #

1. 定位目标CSS规则
   按下F12打开浏览器开发者工具，鼠标悬停在博客区块上，找到控制背景图的元素类（比如类似.owl-carousel .blog-item、.post-bg这类命名）。通常会看到两组规则：

   • 默认状态下背景图隐藏：

     .blog-item .post-bg {
       opacity: 0;
       visibility: hidden;
     }
     

   • 悬停时背景图显示：

     .blog-item:hover .post-bg {
       opacity: 1;
       visibility: visible;
     }
     

2. 修改CSS实现始终显示
   把默认状态的规则改成如下，让背景图一直可见：

   .blog-item .post-bg {
     opacity: 1;
     visibility: visible;
   }
   

   要是找不到原始规则，直接在WordPress后台的外观 > 自定义 > 额外CSS里添加上面这段代码（记得把类名替换成你实际找到的），用!important强制覆盖原有样式也可以：

   .blog-item .post-bg {
     opacity: 1 !important;
     visibility: visible !important;
   }
   

3. 优化文字可读性（可选）
   如果背景图显示后文字看不清，给文字区域加半透明背景：

   .blog-item .post-text {
     background-color: rgba(255,255,255,0.7);
     padding: 10px 15px;
   }
   

内容的提问来源于stack exchange，提问作者Aaron Rapp