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

本文介绍: 项目场景：项目场景：使用 jquery 实现鼠标移入目标框出现悬浮框功能问题描述类型1：一个目标框和一个悬浮框 #hoverBo x { display: none; /* 初始状态隐藏 */}#targetElem ent{ width: 100px; height: 100px; border: red s ol id 1px;} <div id=”hoverBo x“&g t; <!– 悬浮框内容 –> <

项目场景：

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

问题 描述

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

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

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

 $(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"&gt;
        <!-- 目标元素的内容 -->
      </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的d ata（）方法来实现该功能。

常见问题：

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

 // 目标框鼠标移入事件
        $('.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);
        });