切换开关：更改光标指针

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 小提琴链接是.. http://jsfiddle.net/Wd2rL/

谢谢。

Answer 1

一种方法是将“蓝色图层”div 移动到“周”和“月”div 的顶部，使其半透明，然后将其光标设置为默认值，然后将“周”和“月”div 的光标设置为指针。

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

更新

进行了以下更改：（小提琴更新： 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 上都带有可见的光标：指针