Toggle Switch: Change cursor pointer

Question

I am using Toggle switch from this link: http://ghinda.net/css-toggle-switch/bootstrap.html.

I want the selected part (with Blue batch) to be cursor:default and unselected (with white batch) to be 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

One way is to move the "blue layer" div on top of "week" and "month" div's, make it semi transparent and then set its cursor to default, and then you set "week" and "month" div's cursor to pointer.

Bonus: it's CSS only, where no extra scriptings is needed

UPDATE

Following changes made: (fiddle update: 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%; }

UPDATE 2

After some more thinking, and if you don't care about older IE (8 and lower ver. .. and you do already by using css animation), you can use the :checked selector to alter the z-index of the elements. This means no transparency and full colored div's/text can be used.

Sample of with/without :checked selector:

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

This solution will solve the tricky part here, as the layer layout is the trick, how to slide the colored div under a text and at the same time having where to click above the text .

This means, in this case, the checkbox is on top until it's checked, and checked it will be placed at bottom (and cursor:pointer/clickable area is hidden).

And if a user has IE8, it will still work, but with visible cursor:pointer on both marked/unmarked div's

Answer 2

Do like this:)

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