我需要下面的单选按钮由两个单独的框组成，而不是一个:
<!DOCTYPE html>
<html>
<head>
<style>
.navText {
font-family: Helvetica, sans-serif;
font-size: 15px;
font-weight: 400;
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
input[type=radio] {
display: none;
}
.overlay {
position: relative;
float: left;
width: 100px;
height: 50px;
display: table;
background-color: grey;
}
input[type=radio]:hover + .overlay {
background-color: red;
}
input[type=radio]:checked + .overlay {
background-color: red;
}
</style>
</head>
<body>
<label><input type="radio" name="nav" onclick="document.location='#';">
<div class="overlay"><h1 class="navText">Home</h1></div></label>
</body>
</html>
我希望它像这样工作(但仍然是一个单选按钮):
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 153px;
height: 50px;
float: left;
}
.container:hover div {
background-color: red;
}
.box1 {
width: 50px;
height: 50px;
float: left;
margin-right: 3px;
background-color: grey;
}
.box2 {
width: 100px;
height: 50px;
float: left;
background-color: grey;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
如何让单选按钮由两个独立的框组成？
最佳答案
您可以使用伪元素 :after 添加另一个框
.overlay:after {
content:'';
position: absolute;
width: 100px;
height: 50px;
left:104px;
display: block;
background-color: yellow;
}
.overlay:hover,
.overlay:hover:after {
background-color: red;
}
input[type=radio]:checked + .overlay,
input[type=radio]:checked + .overlay:after {
background-color: red;
}
此外，如果您希望叠加层在 :hover 时改变颜色，您需要将样式应用于叠加层，而不是单选按钮(因为单选按钮本身无法悬停)。
在这里 fiddle : http://jsfiddle.net/0r1tefr8/2/
关于html - 需要一个样式单选按钮由两个单独的框组成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25328748/