Bootstrap结合OwlCarousel轮播组件hover事件不生效如何解决

失效原因 #

你将.card-body设置为visibility: hidden后，该元素本身处于不可交互状态，浏览器无法识别到它的hover事件，和轮播组件无关。

修复代码 #

替换你CSS中对应的.card-body相关规则即可：

.gtco-testimonials .card-body{
    visibility: hidden;
}
/* 改为监听父级卡片的hover事件，再修改子元素的可见性 */
.gtco-testimonials .card:hover .card-body{
    visibility: visible;
    background-color: aqua;
}

逻辑说明 #

• 外层卡片.card全程可见，可以正常接收鼠标交互事件
• 通过父元素的hover状态触发子元素的样式变更，就能实现悬停卡片才显示内部文字的需求

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