鼠标悬停priceListItem时仅显示对应priceListItemCirclePrice的问题

问题原因 #

你之前的代码在鼠标悬停时，是全局查找所有.priceListItemCirclePrice元素并修改显示状态，所以才会出现所有元素一起显示的情况。要实现只显示当前悬停项对应的元素，核心是只操作当前元素内部的目标节点。

方案1：修改JavaScript代码（原生JS） #

先获取所有.priceListItem，然后在事件函数里定位当前元素内的.priceListItemCirclePrice，只修改它的状态：

// 获取所有列表项
const priceItems = document.querySelectorAll('.priceListItem');

priceItems.forEach(item => {
  // 提前缓存当前项内的目标元素，避免重复查找
  const targetCircle = item.querySelector('.priceListItemCirclePrice');
  
  // 鼠标悬停事件
  item.onmouseover = function() {
    targetCircle.style.display = 'block';
  };
  
  // 鼠标离开事件
  item.onmouseout = function() {
    targetCircle.style.display = 'none';
  };
});

方案2：纯CSS实现（更高效） #

如果你的HTML结构是.priceListItem直接包含.priceListItemCirclePrice，完全可以不用JS，用CSS伪类直接实现，性能更好：

/* 默认隐藏 */
.priceListItemCirclePrice {
  display: none;
}

/* 鼠标悬停父元素时，显示内部的目标元素 */
.priceListItem:hover .priceListItemCirclePrice {
  display: block;
}

这种方法不需要绑定JS事件，代码更简洁，也避免了JS可能带来的性能损耗。

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