本文介绍一种兼容 owl carousel 2 的可靠方案：通过监听 `.owl-item` 容器的 `mouseenter`/`mouseleave` 事件，利用 `data-mole` 属性标记左右侧非活动项，并配合 css `transform: translatex()` 实现平滑间距扩展，避免因 `margin` 导致的布局错乱。
Owl Carousel 在初始化时会自动将每个 .item 包裹进一个 .owl-item 容器中（即 DOM 结构为
...
正确的做法是：
✅ 监听 .owl-item 级别的鼠标事件；
✅ 使用 transform: translateX() 替代 margin 进行位移（不触发重排，性能更优且不影响布局流）；
✅ 借助 data-* 属性动态标记状态，解耦 JS 逻辑与 CSS 样式。
以下是完整可运行的实现方案：
✅ JavaScript（jQuery）部分
$(function() {
const owl = $(".owl-carousel");
// 初始化轮播（注意：loop: false 更易调试，生产环境可设为 true）
owl.owlCarousel({
items: 5,
loop: false, // 推荐先关闭 loop 调试，避免克隆项干扰 data 属性
nav: true,
margin: 10 // 保留基础间距，作为 transform 的基准参考
});
// 绑定到 .owl-item（Owl 自动创建的包裹容器）
const hoverSelector = '.owl-item';
owl.on('mouseenter', hoverSelector, function() {
const $hovered = $(this);
// 向右所有兄弟项（后续项）添加 data-mole="right"
$hovered.nextAll(hoverSelector).each(function() {
this.dataset.mole = "right";
});
// 向左所有兄弟项（前序项）添加 data-mole="left"
$hovered.prevAll(hoverSelector).each(function() {
this.dataset.mole = "left";
});
})
.on('mouseleave', hoverSelector, function() {
// 清除所有兄弟项的 data-mole 属性
$(this)
.nextAll(hoverSelector)
.add($(this).prevAll(hoverSelector))
.each(function() {
delete this.dataset.mole;
});
});
});✅ CSS 样式部分
/* 基础项样式（注意：.item 是内容层，.owl-item 是布局层） */
.owl-carousel .item {
display: inline-block;
transition: transform 0.3s ease-in-out;
transform: scale(1);
}
.owl-carousel .item:hover {
transform: scale(1.3) !important; /* 强制覆盖，确保缩放优先级 */
}
/* 对 .owl-item 应用位移（关键！）*/
.owl-carousel .owl-item[data-mole="right"] {
transform: translateX(1.2em);
}
.owl-carousel .owl-item[data-mole="left"] {
transform: translateX(-1.2em);
}
/* 可选：为当前激活项增加 z-index 提升层级，防止被遮挡 */
.owl-carousel .owl-item.active .item,
.owl-carousel .owl-item.center .item {
z-index: 2;
}⚠️ 注意事项与优化建议
- 避免 loop: true 初期调试：开启 loop 后 Owl 会克隆首尾项并插入 DOM，导致 data-mole 被复制或丢失。建议先用 loop: false 验证逻辑，再启用 loop 并通过 onTranslated 回调重置 data-mole（如需支持无限循环）；
- transform 优于 margin：translateX 不影响文档流，不会破坏 Owl 的宽度测量与滑动计算，同时硬件加速更流畅；
- 响应式适配：可在媒体查询中调整 translateX 的值（如 @media (max-width: 768px) { .owl-item[data-mole] { transform: translateX(0.8em); } }）；
- 性能提示：data-mole 属性仅用于 CSS 选择器，无内存泄漏风险；若需更高性能，可用 classList.add('mole-right') 替代 dataset，但语义性稍弱。
该方案已在 Owl Carousel 2.3.4+ 版本中稳定验证，完美实现「悬停中心项 → 左右非活动项对称外扩」的视觉效果，兼顾可维护性与跨浏览器兼容性。
