我正在尝试创建类似this的内容 但我用javascript并不是那么好...... 所以我现在得到了这个,但我不能让悬停效果起作用..
<!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;
}
这有效但我如何制作悬停效果?任何帮助都会有用!如果你认为我应该完全不同,请告诉我
答案 0 :(得分:3)
只需使用纯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>
你甚至可以更加想象并添加一些转换(大多数浏览器现在支持它们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>