寻求桌面与移动端通用的Div悬停触发淡入淡出效果解决方案

我太懂这种跨设备兼容的头疼了——桌面端用hover能完美控制fademe元素的显隐，但到了移动设备上，hover事件直接“罢工”，原代码里加的touchstart/touchend也没完全解决问题对吧？咱们来调整一下代码，让它能无缝适配所有设备。

原代码的核心问题 #

原代码里虽然加了触摸事件，但移动设备的触摸逻辑和桌面hover有本质区别：触摸一次相当于“点击+hover”，如果不做状态处理，很容易出现元素显示后无法隐藏，或者重复触发事件的情况。另外mouseover/mouseout会因为子元素冒泡导致不必要的触发，换成mouseenter/mouseleave会更精准。

适配所有设备的改进方案 #

下面是修改后的完整代码，我会在后面解释关键改动：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eh, what's up doc?</title>
<style>
/* 统一fademe元素的基础样式，避免重复代码 */
.fademe-base {
  color:#000;
  text-align: center;
  font-size: 14px;
  float: right;
  margin: 0 25px;
  opacity: 0;
  transition: opacity 1s; /* 现代浏览器支持标准transition，前缀可以简化 */
}

.show {
  opacity: 1 !important;
}

/* 父元素可以加个样式方便测试 */
.parent {
  padding: 20px;
  background: #eee;
  margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="parent">
  <div id="fademe" class="fademe-base"> »» here «« </div>
</div>
<div class="fademe fademe-base"> »» here «« </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// 状态变量，防止触摸和鼠标事件重复触发
let isTouching = false;

// 处理#fademe的显隐
$("body").on("mouseenter touchstart", ".parent", function(e) {
  if (e.type === 'touchstart') {
    isTouching = true;
    e.preventDefault(); // 阻止默认触摸行为，避免触发点击事件
  }
  if (!isTouching || e.type === 'touchstart') {
    $("#fademe").addClass("show");
  }
});

$("body").on("mouseleave touchend", ".parent", function(e) {
  if (e.type === 'touchend') {
    isTouching = false;
    e.preventDefault();
  }
  $("#fademe").removeClass("show");
});

// 处理.fademe的显隐（鼠标悬停body，触摸点击body）
$("body").on("mouseenter touchstart", function(e) {
  if (e.type === 'touchstart') {
    isTouching = true;
    e.preventDefault();
  }
  if (!isTouching || e.type === 'touchstart') {
    $(".fademe").addClass("show");
  }
});

$("body").on("mouseleave touchend", function(e) {
  if (e.type === 'touchend') {
    isTouching = false;
    e.preventDefault();
  }
  $(".fademe").removeClass("show");
});
</script>
</body>
</html>

关键改动说明 #

1. CSS优化：

   • 提取了fademe-base公共类，避免重复写相同样式，更易维护
   • 简化了transition前缀，现代主流浏览器都支持标准transition属性
   • 给父元素加了测试样式，方便直观看到触发区域

2. 事件逻辑优化：

   • 用mouseenter/mouseleave替代mouseover/mouseout，避免子元素冒泡导致的意外触发
   • 增加isTouching状态变量，防止触摸事件和鼠标事件互相干扰（比如移动设备上触摸后又触发鼠标事件）
   • 在触摸事件里调用e.preventDefault()，避免触发浏览器默认的点击行为，防止元素显隐出现闪烁
   • 分开处理触摸和鼠标事件的触发条件，确保每种设备下都能正确触发显隐

3. 移动设备适配：

   • 加入了<meta name="viewport">标签，确保移动设备上页面显示正常，不会出现缩放问题
   • 触摸事件的逻辑模拟了hover的“悬停”效果：触摸父元素时显示，松开触摸或离开父元素时隐藏

这样修改后，不管是桌面端用鼠标hover，还是移动端用触摸操作，fademe元素都能正常显隐啦！

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