切換開關：更改光標指針

我正在使用此切換開關：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/

感謝。

來源

2014-02-26 Ravi Mishra

一種方法是在「星期」和「月」div之上移動「藍色層」div，使其半透明，然後將其光標設置爲默認值，然後設置「星期」和「月」 div的光標指針。

獎勵：（小提琴更新：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

經過一番只，如果沒有額外的scriptings需要

UPDATE

繼所做的更改的CSS更多的思考，如果你不關心較舊的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

來源

2014-02-26 07:00:51 LGSon

我真的嘗試這個，但你能提供的代碼，因爲我認爲它不會工作。 –

感謝您的答覆。我現在應用這個和它的工作，但是當我提供標籤顏色爲白色隱藏。 jsfiddle http://jsfiddle.net/EFqek/2/ –

更新的小提琴（小提琴：http://jsfiddle.net/Wd2rL/10/） –

做這樣的指針:)

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

來源

2014-02-26 07:01:42 Arunkumar

這是很好的解決方案，但不是那麼有用，因爲他想在只CSS代碼。 –

是的，我想在CSS解決方案只 –

好，經過很多工作，我找到了簡單的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/

來源

2014-02-26 07:26:02

感謝您使用我的思維方式。證明了我的「大腦」還在工作:) – LGSon

英雄所見略同;） –

切換開關：更改光標指針

回答

相關問題