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>

我的小提琴链接是.. 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上的指针

Answer 2

这样做：）

  $(document).ready(function(){
  $('.a').mouseenter(function(){
  if($(this).attr("val")=="0")
  {
    $(this).css("cursor","pointer");
  }
 else
  {
    $(this).css("cursor","default");
  }
 });
 $('.a').click(function(){
 $(".a").attr('val','0');
 $(this).css("cursor","default");
 $(this).attr("val","1"); 
 });
 });

Here is a fiddle

Answer 3

嗯，经过大量工作后，我找到了简单的CSS解决方案，希望你会喜欢它。

根据PellePenna解决方案，我已设法更新z-index。

.switch-toggle label{
    cursor:pointer;
}
.switch-toggle a{
    cursor:default;
    opacity:0.5;
    z-index:3;
    background-color:#208bca;
}

这是JSFiddle的链接

http://jsfiddle.net/EFqek/

切换开关：更改光标指针

3 个答案: