on hover隐藏label内容疑问：仅测Portugal标签，元素内操作是否受限？

首先明确说：在label元素内部做hover清空内容的操作，完全没有限制！你之前只针对Portugal标签尝试没成功，大概率是选择器写得不对、事件绑定有问题，或者CSS优先级没搞对。下面给你两种实用的实现方式，不管是单个标签还是批量处理都能用：

方法1：纯CSS搞定（不用写JS） #

如果你的Portugal标签有专属的类或者ID，比如给它加个class="portugal-label"，直接用CSS的:hover伪类就能实现：

/* 方案A：隐藏文字，但保留元素原来的占位空间 */
.portugal-label:hover {
  color: transparent;
}

/* 方案B：直接清空内容，元素会收缩成空状态 */
.portugal-label:hover {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
}

小提醒：如果label里面还嵌套了其他元素（比如<input>或者<span>），别直接给整个label加样式，要精准选中放文字的子元素，比如.portugal-label:hover .label-text，避免影响其他元素的显示。

方法2：用JS实现（更灵活） #

要是你需要更复杂的逻辑——比如鼠标离开后恢复原内容，或者结合其他交互——用JS绑定事件就很方便：

// 先找到目标label元素，这里假设它的文本是"Portugal"，或者你给它加了ID
const portugalLabel = Array.from(document.querySelectorAll('label'))
  .find(el => el.textContent.trim() === 'Portugal');

// 先把原始内容存起来，方便后续恢复
const originalContent = portugalLabel.textContent;

// 鼠标hover时清空内容
portugalLabel.addEventListener('mouseover', () => {
  portugalLabel.textContent = '';
});

// 可选：鼠标离开时恢复原内容
portugalLabel.addEventListener('mouseout', () => {
  portugalLabel.textContent = originalContent;
});

注意：原生JS没有:contains()选择器，所以用了数组的find方法来筛选文本匹配的label，要是你用jQuery的话，直接$('label:contains("Portugal")')就可以。

为啥之前尝试没成功？可能是这些坑 #

• 选择器写错了：比如不小心选了label的父元素，而不是label本身
• CSS优先级不够：其他样式覆盖了hover的规则，可以临时加个!important测试（但别长期用，最好调整选择器优先级）
• label里有嵌套元素：比如文字放在<span>里，直接清空label的textContent会把所有子元素都清掉，这时候要单独选中那个<span>来操作

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