如何使用jQuery/JS实现悬停图片时显示layer-term-name类文本

首先明确基础前提：默认状态下.layer-term-name元素为隐藏状态，你可以通过以下两种方案实现需求。 #

方案1：jQuery实现（适配你的技术栈要求） #

步骤1：添加基础样式 #

/* 控制文本默认隐藏，可根据需求自定义位置、外观样式 */
.layer-term-name {
  display: none;
  /* 示例悬浮提示样式可选：
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  */
}
.wc-layered-nav-term .swatch-inner {
  position: relative; /* 配合悬浮提示的定位需求 */
}

步骤2：编写交互逻辑 #

// 等待DOM加载完成后执行
$(function() {
  // 给带背景图的色板元素绑定鼠标进出事件
  $('.filter-swatch span[style*="background-image"]').on('mouseenter', function() {
    // 查找当前色板对应的文本元素并显示
    $(this).closest('.swatch-inner').find('.layer-term-name').show();
  }).on('mouseleave', function() {
    // 鼠标移出时隐藏文本
    $(this).closest('.swatch-inner').find('.layer-term-name').hide();
  });
});

逻辑说明 #

• 选择器精准匹配带背景图的色板元素，避免误绑定其他无关元素
• 通过closest()查找公共父级再定位对应文本，确保存在多个色板时，不会触发其他色板的文本显示

方案2：纯CSS实现（无需JS，性能更高） #

如果没有强制要求用jQuery实现，纯CSS也可以完成相同效果：

.layer-term-name {
  display: none;
  /* 自定义外观样式同上 */
}
/* 利用相邻兄弟选择器，色板悬浮时直接触发对应文本显示 */
.filter-swatch:hover + .layer-term-name {
  display: block;
}

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