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

Question

我尝试通过嵌套输入字段和span元素来为特定标签（并非所有）形成自定义单选按钮的悬停状态，如下所示 -

{{1}}

悬停状态应该是光标指针变化的状态。我将如何实现这一目标？现在只有span（自定义单选按钮设计）获取指针光标。如果用户悬停标签文本则没有任何反应。

Answer 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>

编辑 - 下面的评论，请参阅以下内容：

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)）