html - 如何防止事件触发关联元素？

Question

当 a<label>悬停在上面时，会触发第一个元素的悬停效果（在本例中为第一个<button>元素）

如何防止这种情况？

label {
  display: block;
  margin-bottom: 10px;
}

button:hover {
  transform: scale(1.10);
}

<label>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
    </label>

标签： htmlcss

Answer 1

只需给它一个虚假的for属性：

label {
  display: block;
  margin-bottom: 10px;
}

button:hover {
  transform: scale(1.10);
}

<label for="foo">
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
    </label>