具有嵌套跨度和输入的标签的悬停状态答案

【问题标题】：Hover state for label with nested span and input具有嵌套跨度和输入的标签的悬停状态
【发布时间】：2016-06-08 10:25:13
【问题描述】：

我正在尝试为特定标签（不是全部）运行悬停状态，该标签通过嵌套输入字段和 span 元素形成自定义单选按钮，就像这样 -

<label>
    <input id="sample" name="sample" type="radio" value="sample">
    <span></span>
    Sample
</label>

悬停状态应该是光标指针变化的状态。我将如何实现这一目标？现在只有跨度（这是一个自定义的单选按钮设计）有一个指针光标。如果用户悬停标签文本，则不会发生任何事情。

【问题讨论】：

【解决方案1】：

为什么不用em、i 等标签和样式用cursor: pointer 换行？

label em {
  cursor: pointer;
  font-style: normal;
  }

<label>
    <input id="sample" name="sample" type="radio" value="sample">
    <span></span>
    <em>Sample</em>
</label>

编辑 - 进一步到下面的 cmets，请参阅以下内容：

label, label *:not(input) {
  cursor: pointer;
  font-style: normal;
  }

<label>
    <input id="sample" name="sample" type="radio" value="sample">
    <span></span>
    Sample
</label>

由于您无法使用 CSS 选择实际的文本节点（即 - 在您的示例中为“Sample”），我们可以使用 CSS 将 label 作为一个整体及其后代设置样式，但输入 ( :not(input))

【讨论】：