如何在點擊時使標籤變得不透明？

我希望在四條線上選擇的每個選項在點擊時變爲不透明。另外我需要隱藏收音機。對不起，我的英文不好「/如何在點擊時使標籤變得不透明？

在這裏看到：http://leagueipsum.blogspot.com.br/p/boosting_1.html

2015-05-01 Rubens Paulo

隨着一點點的CSS的幫助 - 您需要同時採取opacity:0.5斷#wrapper label，並把它放在孩子們，並增加透明度改變給孩子上:hover和:checked，像這樣：

#wrapper label { 
    opacity: 1; 
} 

    #wrapper label input, 
    #wrapper label span, 
    #wrapper label img { 
     opacity:0.5; 
    } 

    #wrapper label:hover input, 
    #wrapper label:hover span, 
    #wrapper label:hover img { 
     opacity:1; 
    } 

    #wrapper label input:checked{ 
     visibility:hidden; 
    } 
    #wrapper label input:checked + span, 
    #wrapper label input:checked + img { 
     opacity:1; 
    }

來源

2015-05-01 19:01:50 Ted

感謝，幫助了很多！我甚至沒有看到這種可能性。我只是這些語言的同情者，我希望有一天能把它獻給他們！我花了整整一天的時間做這個愚蠢的網頁，因爲我需要研究一些我需要的東西來構建它。除了始終保持自己避開javascript ^^。我希望在這裏學習新事物！ –

我希望我能投票。「/ –

你想要做的是絕對定位input關閉屏幕，並使用:checked僞選擇和+相鄰兄弟選擇切換的不透明度在label，像這樣的：

HTML

<input id="radio" type="radio"> 
<label for="radio">Label</label>

CSS

input[type=radio]{ 
    left:-9999px; 
    position:absolute; 
} 
label{ 
    opacity:.75; 
} 
:checked+label{ 
    opacity:1; 
}

來源

2015-05-01 19:04:29 Shaggy

謝謝！我結合了兩個答案，現在完全是我想要的！我只是不喜歡使用JavaScript，我總是試圖找到一種方法來解決這種問題與CSS。 –

我希望我可以投票「。/ –

您可能還沒有投票權，但如果其中一個答覆已經回答了您的問題，並且您滿意，那麼您可以接受。 – Shaggy

如何在點擊時使標籤變得不透明？

回答

相關問題