Toggle Switch: change the cursor pointer

Question

I use the Toggle switch at this link: http://ghinda.net/css-toggle-switch/bootstrap.html .

I want the selected part (with a blue batch) to be cursor:defaultand not selected (with a white batch) as cursor: pointer.

This is my HTML code.

<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>

My js fiddle link is .. http://jsfiddle.net/Wd2rL/

Thanks.

Answer 1

- div " " "" "" div, , , "" "" div .

: CSS,

: ( : http://jsfiddle.net/Wd2rL/9/)

#weeklbl, #monthlbl {cursor:pointer}   // added as both css and id 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- . , 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"); 
 });
 });

Answer 3

Well, after a lot of work, I managed to find you a simple CSS solution, I hope you enjoy it.

as per PellePenna decision I was able to update the z-index.

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

This is a link to JSFiddle

http://jsfiddle.net/EFqek/