JS实现hover切换div默认第一个激活 无hover时保持至少一个div显示

核心改动点 #

• 移除了初始化时全量隐藏所有box的逻辑，改为仅隐藏非首项的box，保证默认状态展示第一个div
• 优化hover进入逻辑：触发hover时先隐藏所有box，再展示当前hover对应的box
• 重写hover离开逻辑：hover结束后直接重置为展示第一个box，确保无任何元素hover时始终保留第一个展示

调整后完整代码 #

JS代码 #

// 初始化：仅第一个box显示，其余隐藏
$('[class^="cr-box"]').css("opacity", "0").eq(0).css("opacity", "1");

$('[class^="cr-icon"]').hover(function() {
  // hover进入时：隐藏所有box，展示当前对应id的box
  const id = $(this).data('id');
  $('[class^="cr-box"]').css("opacity", "0").eq(id - 1).css("opacity", "1");
}, function() {
  // hover离开时：重置为显示第一个box
  $('[class^="cr-box"]').css("opacity", "0").eq(0).css("opacity", "1");
});

可选优化（更易维护） #

如果想用CSS类控制样式、加过渡效果，可以先加样式：

.cr-box {
  opacity: 0;
  transition: opacity 0.2s ease; /* 悬浮切换更顺滑 */
}
.cr-box.active {
  opacity: 1;
}

对应JS简化为类操作：

// 初始化默认给第一个box加激活类
$('[class^="cr-box"]').eq(0).addClass('active');

$('[class^="cr-icon"]').hover(function() {
  const id = $(this).data('id');
  $('[class^="cr-box"]').removeClass('active').eq(id - 1).addClass('active');
}, function() {
  // 无hover时回到默认激活第一个
  $('[class^="cr-box"]').removeClass('active').eq(0).addClass('active');
});

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