如何利用hover属性控制列表元素内对应按钮的显示与隐藏？

嗨，这个问题我太熟悉啦～ 你现在的代码之所以会让所有.pin_false按钮同时显示/隐藏，是因为$('.pin_false')是全局选择所有带这个类的元素，没有限定操作范围。咱们只需要把操作范围缩小到当前hover的列表项内部就行，给你几种实用的解决方案：

方案一：用jQuery的$(this)定位当前元素 #

修改你的事件处理函数，用$(this)获取当前触发hover的.dashboard_li，再通过find()找到它内部的.pin_false元素：

$(".dashboard_li").mouseover(function () {
  // 仅操作当前hover列表项内的按钮
  $(this).find('.pin_false').css("display", "block");
});
$(".dashboard_li").mouseout(function () {
  $(this).find('.pin_false').css("display", "none");
});

方案二：用jQuery的hover()简化写法 #

jQuery的hover()方法可以同时处理鼠标进入和离开的逻辑，搭配show()/hide()方法会更简洁：

$(".dashboard_li").hover(
  // 鼠标进入列表项时
  function() {
    $(this).find('.pin_false').show();
  },
  // 鼠标离开列表项时
  function() {
    $(this).find('.pin_false').hide();
  }
);

方案三：纯CSS实现（推荐，无需JS） #

如果没有额外的JS逻辑需要绑定，用CSS伪类直接控制是最省心的，性能也更好：

/* 默认状态下隐藏所有固定按钮 */
.dashboard_li .pin_false {
  display: none;
}
/* 当列表项被hover时，显示其内部的固定按钮 */
.dashboard_li:hover .pin_false {
  display: block;
}

这样改完之后，鼠标悬停哪个列表项，就只会显示那个项里的固定按钮啦～

内容的提问来源于stack exchange，提问作者Mr. Almond