我正在网站上使用纯CSS样式来设置单选按钮(从这里获取),但是我无法将光标更改为指针,包括标签和标签内的span(这是样式化单选按钮本身的内容)。
标记
我已经复制了一个场景,链接为jsfiddle,并将光标设置为标签的指针,但是当您将光标悬停在单选按钮上时,光标返回到默认状态。是否可能在单选按钮悬停时更改光标为指针?我尝试在上设置
<div class="demonstration pureCSS">
<div>
<input id="checkboxPureCSS1" type="checkbox" name="checkboxPureCSS" value="1" checked="checked"><label for="checkboxPureCSS1"><span></span>Option 1</label>
</div>
<div>
<input id="checkboxPureCSS2" type="checkbox" name="checkboxPureCSS" value="2"><label for="checkboxPureCSS2"><span></span>Option 2</label>
</div>
<div>
<input id="checkboxPureCSS3" type="checkbox" name="checkboxPureCSS" value="3"><label for="checkboxPureCSS3"><span></span>Option 3</label>
</div>
</div>
<br />
<div class="demonstration pureCSS">
<div>
<input id="radioPureCSS1" type="radio" name="radioPureCSS" value="1" checked="checked"><label for="radioPureCSS1"><span><span></span></span>Option 1</label>
</div>
<div>
<input id="radioPureCSS2" type="radio" name="radioPureCSS" value="2"><label for="radioPureCSS2"><span><span></span></span>Option 2</label>
</div>
<div>
<input id="radioPureCSS3" type="radio" name="radioPureCSS" value="3"><label for="radioPureCSS3"><span><span></span></span>Option 3</label>
</div>
</div>
CSS
.pureCSS input[type=checkbox]:not(old),
.pureCSS input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
.pureCSS input[type=checkbox]:not(old) + label,
.pureCSS input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
cursor: pointer;
}
.pureCSS input[type=checkbox]:not(old) + label > span,
.pureCSS input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
.pureCSS input[type=checkbox]:not(old):checked + label > span,
.pureCSS input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
.pureCSS input[type=checkbox]:not(old):checked + label > span:before{
content : '✓';
display : block;
width : 1em;
color : rgb(153,204,102);
font-size : 0.875em;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
font-weight : bold;
}
.pureCSS input[type=radio]:not(old):checked + label > span > span{
display : block;
width : 0.5em;
height : 0.5em;
margin : 0.125em;
border : 0.0625em solid rgb(115,153,77);
border-radius : 0.125em;
background : rgb(153,204,102);
background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102));
}
我已经复制了一个场景,链接为jsfiddle,并将光标设置为标签的指针,但是当您将光标悬停在单选按钮上时,光标返回到默认状态。是否可能在单选按钮悬停时更改光标为指针?我尝试在上设置
cursor: pointer
,但似乎没有任何效果。