自定義css單選按鈕懸停效果

-1

我正在嘗試創建類似this 但我不是那麼好與JavaScript，所以..所以我現在得到這個，但我不能讓懸停效果工作。。自定義css單選按鈕懸停效果

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>The HTML5 Herald</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 

<input type="radio" id="radio1" name="radios" value="all" checked> 
    <label for="radio1">iPhone</label> 
<input type="radio" id="radio2" name="radios" value="false"> 
    <label for="radio2">Galaxy S IV</label> 
<input type="radio" id="radio3" name="radios" value="true"> 
    <label for="radio3">Nexus S</label> 

<body> 
</body> 
</html>

和CSS

input[type=radio] { 
    display:none; 
    margin:10px; 
} 

input[type=radio] + label { 
    display:inline-block; 
    margin: 2px; 
    padding: 18px 112px; 
    background-color: white; 
    border: 1px solid #d6d6d6; 
    border-radius: 4px; 
} 

input[type=radio]:checked + label { 
    background-image: none; 
    border: 2px solid #08c; 
}

好這個工作，但如何使一個懸停效果？任何幫助將是有用的！此外，如果你認爲我應該這樣做完全不同，請告訴我

來源

2015-10-15 Martijn Linders

只要用純CSS做。

input[type=radio] { 
 
    display: none; 
 
    margin: 10px; 
 
} 
 
input[type=radio] + label { 
 
    display: inline-block; 
 
    margin: 2px; 
 
    padding: 18px 112px; 
 
    background-color: white; 
 
    border: 1px solid #d6d6d6; 
 
    border-radius: 4px; 
 
} 
 
input[type=radio] + label:hover { 
 
    border: 1px solid black; 
 
    background-color: gray; 
 
} 
 
input[type=radio]:checked + label { 
 
    background-image: none; 
 
    border: 2px solid #08c; 
 
}

<input type="radio" id="radio1" name="radios" value="all" checked> 
 
<label for="radio1">iPhone</label> 
 
<input type="radio" id="radio2" name="radios" value="false"> 
 
<label for="radio2">Galaxy S IV</label> 
 
<input type="radio" id="radio3" name="radios" value="true"> 
 
<label for="radio3">Nexus S</label>

你甚至可以去更看中，並添加一些過渡（大多數瀏覽器都支持他們nowdays http://caniuse.com/#feat=css-transitions）

input[type=radio] { 
 
    display: none; 
 
    margin: 10px; 
 
} 
 
input[type=radio] + label { 
 
    transition: all 0.5s ease; 
 
    display: inline-block; 
 
    margin: 2px; 
 
    padding: 18px 112px; 
 
    background-color: white; 
 
    border: 1px solid #d6d6d6; 
 
    border-radius: 4px; 
 
} 
 
input[type=radio] + label:hover { 
 
    border: 1px solid black; 
 
    background-color: LightGray; 
 
} 
 
input[type=radio]:checked + label { 
 
    background-image: none; 
 
    border: 2px solid #08c; 
 
}

<input type="radio" id="radio1" name="radios" value="all" checked> 
 
<label for="radio1">iPhone</label> 
 
<input type="radio" id="radio2" name="radios" value="false"> 
 
<label for="radio2">Galaxy S IV</label> 
 
<input type="radio" id="radio3" name="radios" value="true"> 
 
<label for="radio3">Nexus S</label>

來源

2015-10-15 12:44:12

自定義css單選按鈕懸停效果

回答

相關問題