如何调用两个不同的JavaScript悬停 - How to call a two different JavaScript Hover?

How to call a two different JavaScript Hover?

我有一个脚本(悬停函数)弹出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>

下面是我添加一个hover函数来调用另一个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时，它将不起作用。我需要在代码中更改什么?请帮助。谢谢你！

试试这个

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

可能是序列或语法有问题。试试这段代码，我已经检查过了，工作正常:

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<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);
    }); 
    $('div#pop-up').hide();
    $('div#secondPop-up').hide();
    });
</script>
<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>
<a id="trigger">trigger</a>
<div id="pop-up">pop-up</div>
<a id="secondTrigger">trigger</a>
<div id="secondPop-up">secondPop-up</div>

给出第二个标签id ="secondTrigger"。这就是问题所在......

<a href='#' id='secondTrigger'>Second Trigger </a>