移动端始终显示.text-container，桌面端保留hover交互的实现方法

嘿，这个问题其实可以通过CSS基础控制+JS条件触发的组合来完美解决，既保留桌面端的hover交互，又能让移动端的描述始终可见，不用粗暴禁用JS~

第一步：用CSS设置不同端的默认状态 #

先通过媒体查询，让移动端默认显示描述，桌面端默认隐藏——这样哪怕JS没加载或者被禁用，移动端的描述也能正常显示，桌面端也不会出现异常：

/* 默认：移动端（小于768px）描述始终可见 */
.text-container {
  display: block;
}

/* 桌面端（大于等于768px）默认隐藏描述 */
@media (min-width: 768px) {
  /* 这里的宽度可以根据你的实际响应式断点调整 */
  .text-container {
    display: none;
  }
}

第二步：修改JS代码，仅在桌面端绑定交互 #

接下来调整你的jQuery逻辑，只在屏幕宽度达到桌面断点时，才绑定鼠标移入移出的事件，同时监听窗口 resize 事件，确保尺寸变化时自动适配：

// 定义你的桌面端断点宽度（和CSS里保持一致）
const desktopBreakpoint = 768;

// 封装交互初始化函数，避免重复代码
function setupProjectInteractions() {
  // 先解绑之前的事件，防止窗口resize时重复绑定
  $('.project-container').off('mouseenter mouseleave');

  if ($(window).width() > desktopBreakpoint) {
    // 桌面端：绑定hover显示/隐藏逻辑
    $('.project-container').on('mouseenter', function() {
      $(this).find('.text-container').show();
    }).on('mouseleave', function() {
      $(this).find('.text-container').hide();
    });
  } else {
    // 移动端：确保描述始终可见（兜底处理）
    $('.text-container').show();
  }
}

// 页面加载完成后初始化
$(document).ready(function() {
  setupProjectInteractions();
});

// 监听窗口大小变化，重新适配
$(window).on('resize', function() {
  setupProjectInteractions();
});

为什么这个方案可行？ #

• 移动端：CSS默认让描述可见，哪怕JS完全失效也不受影响；
• 桌面端：CSS默认隐藏描述，JS只在桌面尺寸下绑定hover事件，保留原有交互；
• 窗口resize时：会重新判断当前尺寸，自动切换状态，解决了之前调整屏幕尺寸后才显示的问题。

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