CSS 'only'选项卡：如何为活动状态添加选项卡突出显示？

Question

我已经创建了一个CSS'only'选项卡部分为我的网站，但我努力适应我的代码，以显示当前选定的选项卡的活动状态。

我如何添加悬停和活动状态到我的代码?

在我尝试使用的大多数示例中，都使用了'button'和anchor，然而，到目前为止，我所尝试的一切都破坏了我的代码。

有人能指出我的资源或建议一种方式来调整我的代码请?

谢谢大家的建议。

这是我的HTML &CSS:

:root {
--primary: #0062a4;
--primary_dark: #24435c;
--light: #ffffff;
--dark: #000000;
--shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
}
.tab_trigger ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.tab_trigger ul li label{
box-sizing: border-box;
position: relative;
display: block;
padding: 10px 10px;
cursor: pointer;
min-width: 100px;
background: var(--primary_dark);
text-align: center;
font-weight: 700;
font-size: 16px;
color: var(--light)
}
.tab_trigger ul li:nth-child(1) label{
background: var(--primary_dark);
}
.tab_trigger ul li:nth-child(2) label{
background: var(--primary_dark);
}
.tab_trigger ul li:nth-child(3) label{
background: var(--primary_dark);
}
.tab_trigger ul li:nth-child(4) label{
background: var(--primary_dark);
}
.tab_container_wrap input{
box-sizing: border-box;
position: absolute;
width: 0;
height: 0;
margin: 0;
z-index: -100;
top: -10000;

}
.tab_container_wrap input:checked + .tab_container_box{
display: block;
}
.tab_container_box{
box-sizing: border-box;
background:rgba(255, 255, 255, 0.2);
border: 1px solid;
border-color: #fff;
padding: 20px;
display: none;
color: #000;
}
.tab_container_box:nth-of-type(1){
background:rgba(255, 255, 255, 0.2);
}
.tab_container_box:nth-of-type(2){
background:rgba(255, 255, 255, 0.2);
}
.tab_container_box:nth-of-type(3){
background:rgba(255, 255, 255, 0.2);
}
.tab_container_box:nth-of-type(4){
background:rgba(255, 255, 255, 0.2);
}
.tab_container_box h2{
margin: 0 0 20px;
}

<div class="container">
<div class="tab_trigger">
<ul>
<li><label for="tab1">Rate it</label></li>
<li><label for="tab2">Buzz it</label></li>
<li><label for="tab3">Vibe it</label></li>
<li><label for="tab4">Review it</label></li>
</ul>
</div>
<div class="tab_container_wrap">
<input type="radio" id="tab1" name="1" checked>
<div class="tab_container_box">
<h3>Tab Content Box 1</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
Error, facilis facere earum, nobis molestias dolore itaque 
sequi cupiditate dolorem laudantium ipsam porro in. 
Consequatur dolor placeat totam libero odio similique?
</p>
</div>
<input type="radio" id="tab2" name="1">
<div class="tab_container_box">
<h3>Tab Content Box 2</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
Error, facilis facere earum, nobis molestias dolore itaque 
sequi cupiditate dolorem laudantium ipsam porro in. 
Consequatur dolor placeat totam libero odio similique?
</p>
</div>
<input type="radio" id="tab3" name="1">
<div class="tab_container_box">
<h3>Tab Content Box 3</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
Error, facilis facere earum. 
</p>
</div>
<input type="radio" id="tab4" name="1">
<div class="tab_container_box">
<h3>Tab Content Box 4</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
Error, facilis facere earum, nobis molestias dolore itaque 
sequi cupiditate dolorem laudantium ipsam porro in. 
Consequatur dolor placeat totam libero odio similique?
</p>
</div>
</div>
</div>

Answer 1

要在鼠标悬停或激活时更改代码样式必须首先选择元素然后写入a:hover{background-color:red;....}用于鼠标悬停时更改样式a:active{color:red}用于活动时更改样式或者用于链接时当代码被访问时更改样式就像谷歌所做的那样a:visited{color:red}