Question

我需要下面的单选按钮由两个单独的框组成，而不是一个：

<!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>

如何使单选按钮由两个单独的框组成？

Answer 1

您可以使用伪元素: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;
}

此外，如果您希望叠加层在：悬停时更改颜色，则需要将样式应用于叠加层，而不是单选按钮（因为它无法悬停单选按钮本身）。

这里小提琴： http://jsfiddle.net/0r1tefr8/2/

需要一个风格单选按钮由两个单独的框组成

1 个答案: