javascript - 如何调用两个不同的 JavaScript Hover？

Question

我有一个弹出窗口 div 的脚本(悬停功能)。当我调用“触发器”ID 时它起作用了。问题是当我尝试添加另一个弹出另一个 div 的悬停功能时，第二个悬停将不起作用。

<script type="text/javascript">
 $(document).ready(function(){
    var moveLeft = 20;
    var moveDown = 10;

    $('a#trigger').hover(function(e) {
      $('div#pop-up').show();
     }, function() {
      $('div#pop-up').hide();
    });

    $('a#trigger').mousemove(function(e) {
      $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    }); 


  });
</script>

这是我添加悬停函数调用另一个div时的代码:

<script type="text/javascript">
 $(document).ready(function(){
    var moveLeft = 20;
    var moveDown = 10;  

    $('a#secondTrigger').hover(function(e) {
      $('div#secondPop-up').show();
     }, function() {
      $('div#secondPop-up').hide();
    });

    $('a#secondTrigger').mousemove(function(e) {
      $("div#secondPop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    }); 

  });
</script>

当我调用#secondTrigger 时，它不起作用。我需要在我的代码中更改什么。请帮忙。谢谢!

Answer 1

试试这个

$(document).on('mousemove','a#secondTrigger',function(e) {
  $("div#secondPop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});