悬停时跟随指针的 Div

Posted 2023-05-08

【中文标题】悬停时跟随指针的 Div

【英文标题】：Div following pointer on hover

【发布时间】：2019-09-08 08:37:09

【问题描述】：

当您悬停某些 div 时，我想显示一个跟随指针的浮动 div，到目前为止，我发现这段带有 jquery 的代码在悬停整个身体时有效，但我想要的是在某些 div 上工作：

CSS

<div id="tail">mouse tail</div>

jQuery

$(document).bind('mousemove', function(e)
    $('#tail').css(
       left:  e.pageX + 20,
       top:   e.pageY
    );
);

我尝试了 bind 到特定的选择器，但它不起作用。

当您将鼠标悬停在 div 之外时，该 div 应该会消失，而当您将鼠标悬停在 div 中时会重新出现。

【参考方案1】：

鼠标离开时div显示为none，进入时显示block

$('.something').bind('mousemove', function(e)
    $('#tail').css(
       left:  e.pageX + 20,
       top:   e.pageY
    );
);

$('.something').bind('mouseleave', function(e)
    $('#tail').css(
       display:  'none'
    );
);
$('.something').bind('mouseenter', function(e)
    $('#tail').css(
       display:  'block'
    );
);

#tail 
  position: fixed;
  display: none;


.something 
  width: 200px;
  height: 160px;
  background: yellow;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tail">mouse tail</div>

<div class='something'> stuff </div>

【参考方案2】：

定位特定的 div，给它们 onmouseenter/onmouseleave 事件：

#tail 
  position: fixed;


.hidden 
  display: none;
;

---

window.addEventListener("mousemove", function(e)
  $('#tail').css(
   left:  e.pageX + 20,
   top:   e.pageY
  );
);

var myDiv = document.getElementById('tail');
var targets = Array.from(document.getElementsByClassName('myTargets'));

targets.map(function(target)
    target.addEventListener('mouseenter', function()
        document.getElementById('tail').classList.remove('hidden')
    );
    target.addEventListener('mouseleave', function()
        document.getElementById('tail').classList.add('hidden')
    );
);