鼠标悬停<li>获取data-thumbnail-src并在光标旁显示图片

修正后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="thumbnail-list">
  <li data-thumbnail-src="image_01.jpg">Item 01</li>
  <li data-thumbnail-src="image_02.jpg">Item 02</li>
  <li data-thumbnail-src="image_03.jpg">Item 03</li>
</ol>
<img id="preview" alt="缩略图预览">

CSS

#preview {
  position: absolute;
  width: 100px;
  height: 100px;
  display: none;
  z-index: 9999; /* 确保图片显示在最上层 */
}

JavaScript

$(function() {
  var $preview = $("#preview");
  var $listItems = $(".thumbnail-list li");

  // 鼠标悬停li时的处理
  $listItems.hover(function() {
    var imgSrc = $(this).data("thumbnail-src");
    $preview.attr("src", imgSrc).show();
    
    // 绑定鼠标移动事件，让图片跟随光标
    $(document).on("mousemove.thumbnail", function(e) {
      $preview.offset({
        left: e.pageX + 10,
        top: e.pageY + 10
      });
    });
  }, function() {
    // 离开时隐藏图片，解绑事件，清空src
    $preview.hide().attr("src", "");
    $(document).off("mousemove.thumbnail");
  });
});

原代码的问题分析 #

1. CSS语法错误：height:100px后缺少分号，导致样式解析异常，影响元素尺寸渲染。
2. 图片初始状态未隐藏：空img标签会显示占位符，默认隐藏能避免页面加载后出现不必要的空白区域。
3. 全局mousemove事件浪费性能：原代码中mousemove事件始终绑定在document上，通过命名空间事件（mousemove.thumbnail）可在离开时精准解绑，减少无意义的计算。
4. data属性获取不规范：使用$(this).data("thumbnail-src")比attr()更符合jQuery处理data属性的标准，支持自动数据类型转换。
5. 选择器范围过大：直接用$("li")会选中页面所有li元素，给目标ol添加类名后，选择器更精准，避免影响其他列表。

内容的提问来源于stack exchange，提问作者Jordy