使用jquery实现鼠标移入目标框出现悬浮框功能

项目场景：

项目场景：使用jquery实现鼠标移入目标框出现悬浮框功能

---

问题描述

类型1：一个目标框和一个悬浮框

 #hoverBox {
  display: none; /* 初始状态隐藏 */
}
#targetElement{
    width: 100px;
    height: 100px;
    border: red solid 1px;
}

   <div id="hoverBox">
        <!-- 悬浮框内容 -->
        <h1>hello world</h1>
      </div>
    <div id="targetElement">
    </div>

 $(document).ready(function() {
  // 当鼠标移入目标元素时显示悬浮框
  $('#targetElement').mouseenter(function() {
    //$('#hoverBox').fadeIn(); // 使用淡入动画显示悬浮框
    // 或使用其他动画效果，例如：
    // $('#hoverBox').slideDown(); // 使用滑动动画显示悬浮框
     $('#hoverBox').show(); // 直接显示悬浮框，无动画效果
     $('#targetElement').hide();
  });

  // 当鼠标移出目标元素时隐藏悬浮框
  $('#targetElement').mouseleave(function() {
    //$('#hoverBox').fadeOut(); // 使用淡出动画隐藏悬浮框
    // 或使用其他动画效果，例如：
    // $('#hoverBox').slideUp(); // 使用滑动动画隐藏悬浮框
     $('#hoverBox').hide(); // 直接隐藏悬浮框，无动画效果
     $('#targetElement').show();
  });
});

---

类型2：多个目标框和多个悬浮框的场景

    .hoverBox {
  display: none; /* 初始状态隐藏 */
}
.targetElement{
    width: 100px;
    height: 100px;
    border: red solid 1px;
}

 <div class="targetElement" data-hoverbox="#hoverBox1">
        <!-- 目标元素的内容 -->
      </div>
      
      <div class="targetElement" data-hoverbox="#hoverBox2">
        <!-- 目标元素的内容 -->
      </div>
      
      <!-- 悬浮框元素 -->
      <div id="hoverBox1" class="hoverBox">
            <h1>hello1</h1>
      </div>
      
      <div id="hoverBox2" class="hoverBox">
        <!-- 悬浮框2的内容 -->
        <h1>hello2</h1>
      </div>      

 $(document).ready(function() {
  // 共享的事件处理函数
  function showHoverBox() {
    var hoverBoxSelector = $(this).data('hoverbox');
    $(hoverBoxSelector).fadeIn(); // 使用淡入动画显示悬浮框
    // 或使用其他动画效果，例如：
    // $(hoverBoxSelector).slideDown(); // 使用滑动动画显示悬浮框
    // $(hoverBoxSelector).show(); // 直接显示悬浮框，无动画效果
  }

  function hideHoverBox() {
    var hoverBoxSelector = $(this).data('hoverbox');
    $(hoverBoxSelector).fadeOut(); // 使用淡出动画隐藏悬浮框
    // 或使用其他动画效果，例如：
    // $(hoverBoxSelector).slideUp(); // 使用滑动动画隐藏悬浮框
    // $(hoverBoxSelector).hide(); // 直接隐藏悬浮框，无动画效果
  }

  // 为所有目标元素绑定事件处理函数
  $('.targetElement').mouseenter(showHoverBox).mouseleave(hideHoverBox);
});

问题分析:

当有多个目标框和悬浮框时，就需要将目标框和悬浮框对应起来，可以使用自定义属性之后，通过jquery的data（）方法来实现该功能。

---

常见问题：

多个悬浮框出现时需要覆盖原来的目标框

 // 目标框鼠标移入事件
        $('.targetEl').mouseenter(function() {
            var hoverBoxSelector = $(this).data('hoverbox');
            $(hoverBoxSelector).css({
            'position': 'absolute',
            'top': $(this).position().top,
            'left': $(this).position().left,
            'width': $(this).outerWidth(),
            'height': $(this).outerHeight(),
            'display': 'block'
            });
        });
        
        // 目标框鼠标移出事件
        $('.targetEl').mouseleave(function() {
            var hoverBoxSelector = $(this).data('hoverbox');
            //解决悬浮框闪动问题
            hoverTimeout = setTimeout(function(){
                $(hoverBoxSelector).css('display', 'none');
            },200);
        });