css - 拨动开关 : Change cursor pointer

Question

我正在使用此链接中的拨动开关:http://ghinda.net/css-toggle-switch/bootstrap.html .

我希望选中部分(蓝色批处理)为cursor:default，未选中部分(白色批处理)为cursor: pointer。

这是我的 HTML 代码。

<div class="switch-toggle well">
    <input id="week" name="view" type="radio" checked>
    <label for="week" onclick="">Week</label>

    <input id="month" name="view" type="radio">
    <label for="month" onclick="">Month</label>

    <a class="btn btn-primary"></a>
</div>

我的 js fiddle 链接是.. http://jsfiddle.net/Wd2rL/

谢谢。

Answer 1

一种方法是将“blue layer”div 移动到“week”和“month”div 之上，使其半透明，然后将其光标设置为默认值，然后设置“week”和“month”div光标到指针。

好处:它只是 CSS，不需要额外的脚本

更新

进行了以下更改:( fiddle 更新:http://jsfiddle.net/Wd2rL/9/)

#weeklbl, #monthlbl {cursor:pointer}   // added as both css and id's on labels

.switch-toggle a {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  z-index: 6;                // changed from 1
    opacity: 0.5;            // added
    cursor:default;          // added
  width: 50%;
  height: 100%; }

更新 2

经过更多思考，如果您不关心旧版 IE(8 和更低版本...并且您已经使用 css 动画)，您可以使用 :checked 选择器来更改 z-index要素。这意味着不能使用透明度和全彩色 div/文本。

有/没有 :checked 选择器的示例:

#week, #month {
  z-index: 6;
}
#week:checked {
  z-index: 1;
}
#month:checked {
  z-index: 1;
}

这个解决方案将解决这里的棘手部分，因为层布局是诀窍，如何将彩色 div 滑动到文本下方，同时在文本上方单击哪里。

这意味着，在这种情况下，复选框在被选中之前一直在顶部，并且被选中后它将被放置在底部(并且光标:指针/可点击区域被隐藏)。

如果用户使用 IE8，它仍然可以工作，但在标记/未标记的 div 上都有可见的光标:指针