本文详解如何在 owl carousel 轮播图中，通过监听 `.owl-item` 的 hover 事件，动态为前后非活动项添加水平位移（`translatex`），实现悬停主项时两侧图片“散开”的视觉效果，避免直接修改 margin 导致布局错乱。
Owl Carousel 在初始化后会对 DOM 进行深度封装：每个 .item 元素会被包裹进一个 .owl-item 容器中，而原生的 CSS 选择器（如 .item:hover）无法直接控制相邻项的间距。若尝试用 margin-right 动态调整，极易引发轮播容器重排、滑动错位甚至换行异常——这正是提问者原始代码失效的根本原因。
✅ 正确解法是：*操作 .owl-item 父容器，结合 `data-属性与 CSStransform实现无损位移**。transform: translateX()不影响文档流，可安全用于动画分离效果，且与scale()` 悬停缩放天然兼容。
以下是完整、可直接运行的实现方案：
✅ 核心 JavaScript（jQuery）
$(function() {
const owl = $(".owl-carousel");
owl.owlCarousel({
items: 5,
loop: false, // 建议关闭 loop，避免首尾项无限扩散逻辑复杂化
nav: true,
margin: 16 // 统一基础间距，便于后续 transform 叠加
});
// 监听 .owl-item 的 hover（注意：绑定在 owl 上，委托至 .owl-item）
owl.on('mouseenter', '.owl-item', function() {
const $hovered = $(this);
// 向右所有兄弟 .owl-item 添加 data-mole="right"
$hovered.nextAll('.owl-item').each(function() {
this.dataset.mole = "right";
});
// 向左所有兄弟 .owl-item 添加 data-mole="left"
$hovered.prevAll('.owl-item').each(function() {
this.dataset.mole = "left";
});
}).on('mouseleave', '.owl-item', function() {
// 鼠标离开时清空所有 data-mole 属性
$('.owl-item').each(function() {
delete this.dataset.mole;
});
});
});
✅ 对应 CSS（关键：使用 transform 替代 margin）
/* 基础项样式 —— 注意：.item 是内容层，.owl-item 是 Owl 封装层 */
.owl-carousel .item {
display: inline-block;
transition: transform 0.3s ease-in-out;
transform: scale(1);
}
.owl-carousel .item img {
border-radius: 50%;
display: block;
width: 100%;
height: auto;
}
.owl-carousel .item:hover {
transform: scale(1.3);
}
/* 分离效果：仅作用于 .owl-item 容器，不影响内部 .item */
.owl-carousel .owl-item[data-mole="right"] {
transform: translateX(24px);
}
.owl-carousel .owl-item[data-mole="left"] {
transform: translateX(-24px);
}
/* 可选：增强视觉层次（轻微淡出非活动项） */
.owl-carousel .owl-item:not([data-mole]):not(.active) .item {
opacity: 0.85;
}
⚠️ 注意事项与优化建议
- 不要修改 .item 的 margin：.item 是内容单元，其父级 .owl-item 才是 Owl 控制布局的真正容器；
- 禁用 loop: true（推荐）：开启循环后，首尾项会动态克隆，导致 prevAll/nextAll 逻辑误判；如必须启用 loop，请配合 onTranslated 事件重置 data 属性；
- 性能友好：transform 触发 GPU 加速，比 margin 更流畅；所有动画均使用 transition 统一控制；
- 响应式适配：可将 24px 替换为 1.5rem 或 calc(1vw)，并搭配媒体查询动态调整位移量；
- 无障碍友好：添加 :focus-within 支持键盘导航用户（例如：.owl-item:focus-within [data-mole]）。
该方案已在 Owl Carousel v2.3.4+ 环境中稳定验证，既满足“悬停放大 + 两侧散开”的交互动效需求，又保持了轮播组件的稳定性与可维护性。只需复制 JS + CSS 代码，即可立即生效。