0

我在链接上使用鼠标悬停事件。我有 2 个版本的 java 脚本代码，第一个不工作。悬停事件不会触发。但它触发的第二个版本。我不知道是什么让第一个版本不起作用。

这是代码：

<script type="text/javascript">
  /* http://www.alessioatzeni.com/wp-content/tutorials/jquery/simple-tooltip/index.html */

  /* this is the first version 
  $(document).load(
    function() 
    {
      // Tooltip only Text
      $(".popupTooltip").hover(
        function()
        {
          // Hover over code
          var title = $(this).attr('title');
          $(this).data('tipText', title).removeAttr('title');
          $('<p class="tooltip"></p>')
          .text(title)
          .appendTo('body')
          .fadeIn('slow');
        }, 
        function() 
        {
          // Hover out code
          $(this).attr('title', $(this).data('tipText'));
          $('.tooltip').remove();
        }
      ).mousemove(
        function(e) 
        {
          var mousex = e.pageX + 20; //Get X coordinates
          var mousey = e.pageY + 10; //Get Y coordinates
          $('.tooltip')
          .css({ top: mousey, left: mousex })
        }
      );
    }
  ); 
  */


  $(document).load(
    $(".popupTooltip").hover(
      function()
      {
        // Hover over code
        var title = $('.popupTooltip').attr('title');
        $('.popupTooltip').data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
      }, 
      function()
      {
        // Hover out code
        $('.popupTooltip').attr('title', $('.popupTooltip').data('tipText'));
        $('.tooltip').remove();
      }
    ).mousemove(
      function(event)
      {
        var mousex = event.pageX + 20; //Get X coordinates
        var mousey = event.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
      }
    )
  ); 

</script>

第一个版本是注释块。我从 www.alessioatzeni.com 复制代码。

这是html部分：

<li>
 <img src=\"$strImageLoc\" alt=\"Image\" width=\"210\">
 <div class=\"one-fourth-image-shadow\"></div>
 <h5>
   $row[title]
 </h5>

 <a href=\"#\" class=\"popupTooltip\" title=\"$row[description]\">
   More info...
 </a>
</li>

当鼠标悬停在“更多信息...”上时，会显示一个弹出窗口。

4

0 回答 0