首页
前端开发
Javascript
实现jQuery鼠标跟随链接提示效果

实现jQuery鼠标跟随链接提示效果

19 次浏览 0 条评论
gz
gz

在使用 jQuery 实现 鼠标移动跟随 的提示效果时，我们可以借鉴 Service Index 区域效果，如在示例页面所展示的。此效果可应用于链接的 title 提示，使提示内容在鼠标悬停时动态显示。以下是实现此功能的简洁代码示例。

$(document).ready(function() {
  $('a').hover(function(e) {
    // 创建提示框
    $('body').append('
' + $(this).attr('title') + '
');
    $(this).attr('title', '');
    // 位置更新
    $('#tooltip').css({
      top: e.pageY + 10 + 'px',
      left: e.pageX + 10 + 'px'
    }).fadeIn('fast');
  }, function() {
    // 恢复提示并删除
    $(this).attr('title', $('#tooltip').text());
    $('#tooltip').remove();
  });
  $('a').mousemove(function(e) {
    // 实时更新提示位置
    $('#tooltip').css({
      top: e.pageY + 10 + 'px',
      left: e.pageX + 10 + 'px'
    });
  });
});

代码说明：

  1. hover 事件 - 实现鼠标进入和离开时动态创建和删除提示框。
  2. mousemove 事件 - 实时更新提示框位置，确保其始终跟随鼠标。

此代码可以轻松集成于各种项目，为用户提供动态的提示显示体验。

gz 文件大小：31.85KB