将光标更改为标签内跨度上的指针

Question

我正在网站上的单选按钮中使用纯 CSS 样式（来自此处使用），但正在努力将光标更改为整个标签上的指针并在 labrl 内跨度（这就是单选按钮外观的样式）按钮本身）。

\n\n

标记

\n\n

<div class="demonstration pureCSS">\n  <div>\n    <input id="checkboxPureCSS1" type="checkbox" name="checkboxPureCSS" value="1" checked="checked"><label for="checkboxPureCSS1"><span></span>Option 1</label>\n  </div>\n  <div>\n    <input id="checkboxPureCSS2" type="checkbox" name="checkboxPureCSS" value="2"><label for="checkboxPureCSS2"><span></span>Option 2</label>\n  </div>\n  <div>\n    <input id="checkboxPureCSS3" type="checkbox" name="checkboxPureCSS" value="3"><label for="checkboxPureCSS3"><span></span>Option 3</label>\n  </div>\n</div>\n\n<br />\n\n<div class="demonstration pureCSS">\n  <div>\n    <input id="radioPureCSS1" type="radio" name="radioPureCSS" value="1" checked="checked"><label for="radioPureCSS1"><span><span></span></span>Option 1</label>\n  </div>\n  <div>\n    <input id="radioPureCSS2" type="radio" name="radioPureCSS" value="2"><label for="radioPureCSS2"><span><span></span></span>Option 2</label>\n  </div>\n  <div>\n    <input id="radioPureCSS3" type="radio" name="radioPureCSS" value="3"><label for="radioPureCSS3"><span><span></span></span>Option 3</label>\n  </div>\n</div>\n

\n\n

CSS

\n\n

.pureCSS input[type=checkbox]:not(old),\n.pureCSS input[type=radio   ]:not(old){\n  width     : 2em;\n  margin    : 0;\n  padding   : 0;\n  font-size : 1em;\n  opacity   : 0;\n}\n\n.pureCSS input[type=checkbox]:not(old) + label,\n.pureCSS input[type=radio   ]:not(old) + label{\n  display      : inline-block;\n  margin-left  : -2em;\n  line-height  : 1.5em;\n  cursor: pointer;\n}\n\n.pureCSS input[type=checkbox]:not(old) + label > span,\n.pureCSS input[type=radio   ]:not(old) + label > span{\n  display          : inline-block;\n  width            : 0.875em;\n  height           : 0.875em;\n  margin           : 0.25em 0.5em 0.25em 0.25em;\n  border           : 0.0625em solid rgb(192,192,192);\n  border-radius    : 0.25em;\n  background       : rgb(224,224,224);\n  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));\n  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));\n  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));\n  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));\n  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));\n  vertical-align   : bottom;\n}\n\n.pureCSS input[type=checkbox]:not(old):checked + label > span,\n.pureCSS input[type=radio   ]:not(old):checked + label > span{\n  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));\n  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));\n  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));\n  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));\n  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));\n}\n\n.pureCSS input[type=checkbox]:not(old):checked + label > span:before{\n  content     : \'\xe2\x9c\x93\';\n  display     : block;\n  width       : 1em;\n  color       : rgb(153,204,102);\n  font-size   : 0.875em;\n  line-height : 1em;\n  text-align  : center;\n  text-shadow : 0 0 0.0714em rgb(115,153,77);\n  font-weight : bold;\n}\n\n.pureCSS input[type=radio]:not(old):checked +  label > span > span{\n  display          : block;\n  width            : 0.5em;\n  height           : 0.5em;\n  margin           : 0.125em;\n  border           : 0.0625em solid rgb(115,153,77);\n  border-radius    : 0.125em;\n  background       : rgb(153,204,102);\n  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));\n  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));\n  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));\n  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));\n  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));\n}\n

\n\n

我已将场景复制为jsfiddle并将光标设置为标签上的指针，但是当您将鼠标悬停在单选按钮上时，光标将返回到其默认状态。

\n\n

是否可以将单选按钮悬停时的光标更改为指针？我尝试过cursor: pointer设置span:hover似乎没有任何效果。

\n

Answer 1

只需添加希望可行即可。

input[type=radio]:hover{
  cursor: pointer;
}

Answer 2

添加cursor: pointer;

.pureCSS input[type="checkbox"]:not(old), .pureCSS input[type="radio"]:not(old) {
    cursor: pointer;
    font-size: 1em;
    margin: 0;
    opacity: 0;
    padding: 0;
    width: 2em;
}

https://jsfiddle.net/csrr3axq/2/