0

リンクでマウス ホバー イベントを使用しています。Java スクリプト コードの 2 つのバージョンがありますが、最初のバージョンが機能していません。ホバー イベントは発生しません。しかし、それが起動する2番目のバージョン。最初のバージョンが機能しない理由がわかりません。

コードは次のとおりです。

<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>

マウスを「More info...」に合わせると、ポップアップが表示されます。

4

0 に答える 0