首页 技术文章 jquery

鼠标不在两个元素上面才隐藏弹窗

发布日期: 2024-02-01
FontSize: 【小 中 大】
鼠标不在两个元素上面才隐藏弹窗

鼠标移动到A元素时，显示B元素，这个情况常见于下拉菜单中，鼠标同时离开A和B元素（鼠标即不悬浮在A元素，也不悬浮在B元素）上面时，B元素隐藏。

达到上面要求的效果，可以使用CSS与jQuery，使用jQuery控制起来更加方便灵活。

jQuery版本：jquery-1.9.1.min.js，本站所有示例均采用该版本，除非有特别的要求。

本文章将使用jQuery来达到上面要求的效果，其中，主要的事件包括：

  • mouseover：当鼠标指针移动到元素上时触发此事件。
  • mouseout：当鼠标指针离开元素时触发此事件。

在线示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
	.A { background: #D9E085; width:300px; margin-top:100px;}
	.B { display:none;}
</style>
</head>

<body>
<div class="A">
  A元素 Hover Me
</div>
<div class="B">B元素</div>

<script src="https://z.lichil.com/views/index/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var cTimer; // 声明一个计时器变量

// 当鼠标悬停在A元素上时
$('.A').on('mouseover', function() {
  
    // 获取A元素相对于文档的位置
    var bOffset = $(this).offset();

    // 计算B元素的位置
    var cLeft, cTop;

    // 如果A元素左边空出的较多，且B元素超出了A元素
    if (bOffset.left < 150) { // 假设B元素宽度为300px
      cLeft = bOffset.left; // 与A元素左对齐
    } else {
      cLeft = bOffset.left - 300; // 与A元素右对齐
    }

    // 如果A元素上方空出较多
    if (bOffset.top < 200) { // 假设B元素高度为200px
      cTop = bOffset.top + $(this).height(); // 显示在A元素下方
    } else {
      cTop = bOffset.top - 200; // 显示在A元素上方
    }

    // 创建B元素并设置样式和位置
    $('.B').css({
      'position': 'absolute',
      'left': cLeft + 'px',
      'top': cTop + 'px',
      'width': '300px',
      'height': '200px',
      'background-color': '#EEE' // 设置B元素样式
    }).show();

  // 清除计时器，确保B元素不会被隐藏
  clearTimeout(cTimer);
});

// 当鼠标移出A元素时开始计时器
$('.A').on('mouseout', function() {
  cTimer = setTimeout(function() {
    $('.B').hide(); // 隐藏B元素
  }, 100); // 延迟500毫秒隐藏B元素
});

// 当鼠标进入B元素时清除计时器
$(document).on('mouseover', '.B', function() {
  clearTimeout(cTimer);
});

// 当鼠标离开B元素时开始计时器
$(document).on('mouseout', '.B', function() {
  cTimer = setTimeout(function() {
    $('.B').hide(); // 隐藏B元素
  }, 100); // 延迟500毫秒隐藏B元素
});

</script>
</body>
</html>

为什么要使用延时，如果不使用延时，当A与B之间有缝隙时，哪怕只有1px的距离，当从鼠标从A滑向B元素时，B元素就马上隐藏了，我们都知道，计算机的速度是非常快的。使用延时，当鼠标从A滑向B元素的时候，两元素如果中间有一定的距离，只要在中间的距离上的时间停留不超过100毫秒，B元素就不会隐藏。而鼠标离开了A与B元素，100毫秒的延时对于人的视觉感觉来说，几乎感觉不到延时，可根据实际要求调整延时参数。

jquery