Tumblr主题编辑故障：鼠标悬停时批量显示所有帖子附加文本

这个问题很典型——你原来的JS代码用了全局选择器，导致鼠标悬停任意一个.post_relative帖子时，会选中页面上所有的.project_type和.project_name元素，所有帖子的信息就会同时冒出来叠加在一起。

解决的核心思路是只操作当前悬停帖子内部的目标元素，用jQuery的$(this)定位触发事件的当前帖子，再通过find()方法在它的范围内查找专属信息元素。

修改后的JS代码示例 #

// 分开处理鼠标移入和移出事件
$('.post_relative').hover(
  // 鼠标移入时，显示当前帖子的专属信息
  function() {
    $(this).find(".project_type, .project_name").show();
  },
  // 鼠标移出时，隐藏当前帖子的专属信息
  function() {
    $(this).find(".project_type, .project_name").hide();
  }
);

如果想要更自然的过渡效果，也可以用fadeToggle()或slideToggle()替代show()/hide()：

$('.post_relative').hover(function() {
  $(this).find(".project_type, .project_name").fadeToggle(200);
});

确认HTML结构正确性 #

还要确保你的帖子嵌套结构是正确的，每个.post_relative内部都包含对应的隐藏元素，比如：

<div class="post_relative">
  <!-- 图片帖子内容 -->
  <img src="your-image-url.jpg" alt="Post Image">
  
  <!-- 专属信息元素，默认隐藏 -->
  <div class="project_type" style="display: none;">Book</div>
  <div class="project_name" style="display: none;">Bobby Smith</div>
</div>

这样修改后，鼠标悬停哪个帖子，就只会显示那个帖子里的专属信息，不会再出现叠加的问题啦。

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