jQuery同类元素单独切换显示：商品悬停显示Free Label问题

嘿，我来帮你搞定这个问题！你的代码现在的核心问题是全局选中了所有.free_label元素，导致不管悬停哪个商品，都会操作所有标签；再加上visibility:hidden的特性和jQuery判断逻辑的冲突，才出现了功能失效或全部显示的情况。

方案一：修正jQuery代码 #

我们需要在hover事件里，只操作当前悬停商品内部的.free_label——用$(this)指代触发事件的当前.product元素，再通过.find()精准定位到它的子标签：

$(function() {
  $('.product').hover(
    // 鼠标进入商品时，显示当前商品的free_label
    function() {
      $(this).find('.free_label').show();
    },
    // 鼠标离开商品时，隐藏当前商品的free_label
    function() {
      $(this).find('.free_label').hide();
    }
  );
});

方案二：用CSS实现（更高效简洁） #

其实这种简单的显示隐藏需求，完全不需要JS，用CSS的:hover伪类就能搞定，性能更好还不依赖jQuery：

/* 默认隐藏所有free_label */
.product .free_label {
  display: none;
}
/* 悬停对应商品时，显示它的free_label */
.product:hover .free_label {
  display: block;
}

原代码失效的原因解析 #

1. 全局选择器问题：$('.free_label')会选中页面上所有的标签，所以hover时所有标签都会同步显示/隐藏；
2. visibility的判断冲突：jQuery的:hidden选择器只识别display:none、宽高为0或不在文档流中的元素，visibility:hidden的元素因为仍占据页面空间，会被判定为“可见”，导致原代码里的逻辑判断完全出错。

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