I have created a CSS 'only' tabbed section for my site but am struggling to adapt my code to show an active state for the current selected tab.

How can I add hover and active states to my code?

In most examples that I have tried to use, 'button' and anchors are used, however, everything I have tried so far breaks my code.

Can someone point me to a resource or suggest a way of tweaking my code please?

Thanks for any and all suggestions.

Here is my 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 >
                <div >
                    <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 >
                    <input type="radio" id="tab1" name="1" checked>
                    <div >
                        <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 >
                        <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 >
                        <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 >
                        <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>

CodePudding user response：

to change your codes style while hovering or activated you have to first select your element and then write this a:hover{background-color:red;....} for while hovering and for change style while active a:active{color:red} or for links when you want to change the style while that code was visited like what google does a:visited{color:red}

CodePudding user response：

In the end I have chosen to use a style from this site:

https://alvarotrigo.com/blog/html-css-tabs/

This way I am able to get the job done in CSS only.

Thanks again all that tried to help.