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

项目场景:

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


问题描述

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

 #hoverBox {
  display: none; /* 初始状态隐藏 */
}
#targetElement{
    width: 100px;
    height: 100px;
    border: red solid 1px;
}
   <div id="hoverBox">
        
        <h1>hello worldh1>
      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>hello1h1>
      div>
      
      <div id="hoverBox2" class="hoverBox">
        
        <h1>hello2h1>
      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);
        });

你可能感兴趣的:(javascript,动画,jquery,css3,前端框架)