我如何改变悬停和焦点状态同时为svg和文本在一个形式?

Question

我自定义了我的单选按钮，使其具有smiley svgs和下面的文本。现在，我希望svg和文本在悬停和同时选中时都改变不透明度。它只适用于svg，但对于文本，只有悬停状态有效，而不是焦点或活动状态。我怎样才能做到这一点呢?

svg {
fill: rgb(242, 242, 242);
height: 3.6rem;
width: 3.6rem;
margin: 0.2rem;
}
input[class="no-barrier"]+svg,
.green {
fill: rgb(0, 204, 79);
opacity: 0.25;
color: rgb(0, 204, 79);
}
input[class="few-barriers"]+svg,
.yellow {
fill: rgb(232, 214, 0);
opacity: 0.25;
color: rgb(232, 214, 0);
}
input[class="moderate-barriers"]+svg,
.orange {
fill: rgb(229, 132, 0);
opacity: 0.25;
color: rgb(229, 132, 0);
}
input[class="extreme-barriers"]+svg,
.red {
fill: rgb(239, 42, 16);
opacity: 0.25;
color: rgb(239, 42, 16);
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
input[type="radio"]+svg+.green {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
input+svg,
span {
cursor: pointer;
}

/* .no-barrier:hover {
color: rgb(0, 204, 79);
fill: rgb(0, 204, 79);
} */
input[class="no-barrier"]:hover+svg,
input[class="no-barrier"]:checked+svg,
input[class="no-barrier"]:focus+svg,
.green:hover,
.green:checked,
.green:focus,
active-green:hover,
active-green:checked,
active-green:focus {
opacity: 1;
}
.active.green {
opacity: 1;
color: rgb(0, 204, 79);
}
.active.yellow {
opacity: 1;
color: rgb(0, 204, 79);
}
.active.orange {
opacity: 1;
color: rgb(0, 204, 79);
}
.active.red {
opacity: 1;
color: rgb(0, 204, 79);
}
input[class="few-barriers"]:hover+svg,
input[class="few-barriers"]:checked+svg,
input[class="few-barriers"]:focus+svg,
span.yellow:hover,
span.yellow:checked,
span.yellow:focus {
opacity: 1;
}
input[class="moderate-barriers"]:hover+svg,
input[class="moderate-barriers"]:checked+svg,
input[class="moderate-barriers"]:focus+svg,
span.orange:hover,
span.orange:checked,
span.orange:focus {
opacity: 1;
}
input[class="extreme-barriers"]:hover+svg,
input[class="extreme-barriers"]:checked+svg,
input[class="extreme-barriers"]:focus+svg,
span.red:hover,
span.red:checked,
span.red:focus {
opacity: 1;
}
span {
display: block;
margin-top: 10px;
}
#contact-method-label label,
#barrier-level-label label,
#employer-terminating label,
#accessibility-experience-label label,
#further-clarification-label label {
font-weight: normal;
}
.form-errors li {
color: #cf2334;
}
.captchaError {
font-weight: 400;
color: #cf2334;
font-size: 16px;
}
form {
margin-top: 5rem;
}
.form-check {
/* display: inline-block; */
text-align: center;
margin: 0 5px;
}
.form-row {
display: flex;
}
div:hover>*,
div:focus>* {
color: pink
}

<div class="form-group">
<label for="barrier-level-label">Rate the level of barrier *</label>
<div class="form-row" id="barrier-level-label">
<div class="form-check">
<label class="form-check-label" for="no-barrier">
<input type="radio" name="barrier-level" class="no-barrier" id="no-barrier" value="1 - no-barrier"/>
<div> <svg viewBox="0 0 24 24"><path d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
<span class="green">1 - no barrier</span></div></label>
</div>
<div class="form-check">
<label class="form-check-label" for="few-barriers">
<input type="radio" name="barrier-level" class="few-barriers" id="few-barriers" value="2 - few-barriers"  />
<svg viewBox="0 0 24 24"><path d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" /></svg>
<span class="yellow">2 - few barriers</span></label>
</div>
</div>
</div>

这里是代码笔的链接:https://codepen.io/jagriti_130501/pen/gOvQOQg

我怎样才能达到相同的最小的css/html/js代码?

Answer 1

看起来所有span元素的规则都在检查元素是否为checked，例如span.yellow:checked，而不是检查输入本身是否带有以下span。

你也可以很容易地减少CSS的数量，因为你不需要知道跨度是什么颜色，因为所有的复选框都做同样的事情:改变不透明度。您可以使用~同胞选择器。

另外，在第一个标签中有一个额外的<div>包装svg和span。

svg {
fill: rgb(242, 242, 242);
height: 3.6rem;
width: 3.6rem;
margin: 0.2rem;
}
input[class="no-barrier"]+svg,
.green {
fill: rgb(0, 204, 79);
opacity: 0.25;
color: rgb(0, 204, 79);
}
input[class="few-barriers"]+svg,
.yellow {
fill: rgb(232, 214, 0);
opacity: 0.25;
color: rgb(232, 214, 0);
}
input[class="moderate-barriers"]+svg,
.orange {
fill: rgb(229, 132, 0);
opacity: 0.25;
color: rgb(229, 132, 0);
}
input[class="extreme-barriers"]+svg,
.red {
fill: rgb(239, 42, 16);
opacity: 0.25;
color: rgb(239, 42, 16);
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
input[type="radio"]+svg+.green {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
input+svg,
span {
cursor: pointer;
}

/* Use the ~ general sibling selector for the spans */
input[type="radio"]:hover+svg,
input[type="radio"]:checked+svg,
input[type="radio"]:focus+svg,
input[type="radio"]:hover~span,
input[type="radio"]:checked~span,
input[type="radio"]:focus~span {
opacity: 1;
}
.active.green {
opacity: 1;
color: rgb(0, 204, 79);
}
.active.yellow {
opacity: 1;
color: rgb(0, 204, 79);
}
.active.orange {
opacity: 1;
color: rgb(0, 204, 79);
}
.active.red {
opacity: 1;
color: rgb(0, 204, 79);
}
span {
display: block;
margin-top: 10px;
}
#contact-method-label label,
#barrier-level-label label,
#employer-terminating label,
#accessibility-experience-label label,
#further-clarification-label label {
font-weight: normal;
}
.form-errors li {
color: #cf2334;
}
.captchaError {
font-weight: 400;
color: #cf2334;
font-size: 16px;
}
form {
margin-top: 5rem;
}
.form-check {
/* display: inline-block; */
text-align: center;
margin: 0 5px;
}
.form-row {
display: flex;
}
div:hover>*,
div:focus>* {
color: pink
}

<div class="form-group">
<label for="barrier-level-label">Rate the level of barrier *</label>
<div class="form-row" id="barrier-level-label">
<div class="form-check">
<label class="form-check-label" for="no-barrier">
<input type="radio" name="barrier-level" class="no-barrier" id="no-barrier" value="1 - no-barrier"/>
<svg viewBox="0 0 24 24"><path d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
<span class="green">1 - no barrier</span></label>
</div>
<div class="form-check">
<label class="form-check-label" for="few-barriers">
<input type="radio" name="barrier-level" class="few-barriers" id="few-barriers" value="2 - few-barriers"  />
<svg viewBox="0 0 24 24"><path d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" /></svg>
<span class="yellow">2 - few barriers</span></label>
</div>
</div>
</div>