Click here to Skip to main content
15,901,205 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm working on a company website and my website design knowledge is very basic. I challenged myself to add interactive elements.

1. My navigation bar has hover animations.

2. My slide show is automatic and also manual.

However when I added my slide animations, any previous animation I had added was overrided and doesn't work anymore. When I hover over my nav bar, the mouse doesn't even realise there is a link there and so no animations appear. Any help is greatly appreciated:(

This is my CSS

.containerhead {
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
 }    

 header { 
     height: 110px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 20px ;
   }

   nav{
    background-color: rgba(0, 0, 0, 0);
    height: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

   
    nav a {
        padding-left: 20px;
        padding-right: 50px;
        color: black;
        text-decoration: none;
        font-family: 'PT Sans', sans-serif;
        position: relative;
        letter-spacing: -0.5px;
        transition-duration: 450ms;
        font-size: 13.5px;
        font-weight:bolder
    }

    nav a:after {
        content: "";
        position: absolute;
        background-color: rgba(243, 211, 104, 0.644);
        height: 1.5px;
        width: 0;
        left: 0;
        bottom: -0.6px;
        transition-duration: 450ms;
    }


    nav a:hover {
        color: rgb(90, 90, 90);
    }

    nav a:hover:after {
        width: 40px;
        left: 19px;

    }

.containerbody {
margin: 0;
padding:0;
padding-top: 190px;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
background: rgb(255, 255, 255);
}

.slider {
    width: 1240px;
    height: 800px;
    border-radius: 0px;
    overflow: hidden;
}

.slides {
    width: 500%;
    height: 800px;
    display: flex;

}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 2s;
}

.slide img {
    width: 1240px;
    height: 600px;
}

/*css for manual slide navigation*/

.navigation-manual {
position: absolute;
width: 1240px;
margin-top: -230px;
padding-bottom: 400px;
display: flex;
justify-content: center;
}

.manual-btn{ 
    border: 1px solid #ffffff;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
margin-right: 40px;
}

.manual-btn:hover {
background: white;
}

#radio1:checked ~ .first {
margin-left: 0;
background-color: #ffffff;
}

#radio2:checked ~ .first {
margin-left: -20%;
background-color: #ffffff;
}
 #radio3:checked ~ .first {
margin-left: -40%;
background-color: #ffffff;
}

#radio4:checked ~ .first {
margin-left: -60%;
background-color: #ffffff;
}

/*CSS for auto naviagtion*/

.navigation-auto {
    position: absolute;
    display: flex;
    width: 1240px;
    justify-content: center;
    margin-top: -230px;
    padding-bottom: 400px;;
}

.navigation-auto div {
    border: 2px solid rgb(235, 216, 141);
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.navigation-auto div:not(:last-child){
margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
background-color: #ffffff;
}

#radio2:checked ~ .navigation-auto .auto-btn2{
background-color: #ffffff;
}

#radio3:checked ~ .navigation-auto .auto-btn3{
background-color: #ffffff;
}

#radio4:checked ~ .navigation-auto .auto-btn{
background-color: #ffffff;
}


What I have tried:

Nothing, im completely lost....

I tried removing the javascript from the html but the animations still didn't return so I haven't attached the html.
Posted
Updated 20-Dec-22 8:40am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900