切换开关：改变光标指针

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/

谢谢。

- Raviranjan Mishra

Answer 1

一种方法是将“蓝色层”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，并且同时在文本上方有可点击区域。

这意味着，在这种情况下，复选框一开始在顶部，直到被选中后才会移到底部（并且光标:pointer/可点击区域被隐藏）。

如果用户使用IE8，它仍然可以工作，但是已标记和未标记的div都会显示可见的cursor:pointer。

- Asons

---

我真的尝试过了，但你能提供代码吗？因为我觉得它不会起作用。 - Raviranjan Mishra

谢谢你的回答。我现在已经应用了这个方法，它可以正常工作了。但是当我将标签颜色设置为白色时，它会隐藏起来。jsfiddle http://jsfiddle.net/EFqek/2/ - Raviranjan Mishra

你的新ccs没有我的上述更改..但即使如此，在灰色标签背景上使用白色文本也会看起来很奇怪，因为几乎看不见。 - Asons

更新了我的答案..现在你拥有了所有需要的东西，只需自己应用它... :) - Asons

感谢您解决了这个问题。 我使用了以下代码： 首先将所有标签的光标设置为指针 .switch-toggle input:checked + label { cursor: default; } - Raviranjan Mishra

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

- Arunkumar

---

这是一个非常好的解决方案，但不如他想要的仅使用CSS编写的代码实用。 - Rajiv Pingale

是的，我希望只用 CSS 来解决问题。 - Raviranjan Mishra

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/

- Rajiv Pingale

---

感谢您使用我的思维方式。这证明了我的“大脑”仍在运转 :) - Asons