Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Why are these hover transitions not working?

P

pc510

Coder
I am trying to get the hover feature to have a slower and smoother transition on the ul.navbar li a and the .button-apt, but for some reason these are not working. I cannot diagnose the problem.

Code: 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 1.5rem;
    font-family: 'Source Sans Pro', sans-serif;

}

#questions-bar {
    background-color: navy;
    text-align: right;
    font-size: 1.5rem;
    padding: 20px;
    text-align: center;

}

#questions-bar a {
    color: white;
    font-weight: normal;
    text-decoration: none;
    font-weight: bold;
}

#questions-bar a:hover {
    color: rgb(183, 231, 247);
}





ul.navbar {
    list-style-type: none;
    margin: 10px;
    padding: 0;
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

ul.navbar li {
    margin: 0 10px;
}

ul.navbar li:last-child {
    margin-right: 0;
}

ul.navbar li a {
    display: block;
    color: navy;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: color 0.6s ease !important;
}

ul.navbar li a:hover {
    background-color: rgb(183, 231, 247);
}



.button-apt {
    background-color: yellow;
    color: navy;
    border: 2px solid transparent;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 0 10px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.5s ease !important;
}

.button-apt:hover {
    background-color: rgb(183, 231, 247) !important;
    border-color: navy;
}






/* styles.css */
#hero-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('doc1.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

#hero-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    display: flex;
}

.background-image img {
    width: 33.33%;
    height: 100%;
    object-fit: cover;
}

.hero-text {
    font-size: 3.5rem;
    text-align: center;
    margin: 10px 0;
}


/* styles.css */
#doctors {
    text-align: center;
    padding: 80px 15px;
    color: navy;
}

#doctors h1 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.doctor-card {
    display: inline-block;
    margin: 10px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;

}

.doctor-card:hover {
    transform: scale(1.1);
}

.doctor-card img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    padding: 20px;
}

.doctor-card h2 {
    margin-top: 10px;
    font-size: 1.2rem;
}


.doctor-name {
    margin-top: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.5s ease-in-out, text-decoration 0.3s ease-in-out;
}

.doctor-name:hover {
    color: blue;
    text-decoration:underline;}




footer {
    background-color: navy;
    padding: 20px 0;
    text-align: center;
    color: white;
    margin: 10px 0 0 0;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.footer-menu li {
    margin: 0 10px;
}

.footer-menu li a {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    position: relative;
    transition: color 0.3s ease-in-out !important;
}

.footer-menu li a::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: rgb(183, 231, 247);
    transition: width 0.3s ease-in-out;
}

.footer-menu li a:hover {
    color: rgb(183, 231, 247);
}

.footer-menu li a:hover::before {
    width: 100%;
}
 
Sort by date Sort by votes
pc510 said:
I am trying to get the hover feature to have a slower and smoother transition on the ul.navbar li a and the .button-apt, but for some reason these are not working. I cannot diagnose the problem.

Code: 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 1.5rem;
    font-family: 'Source Sans Pro', sans-serif;

}

#questions-bar {
    background-color: navy;
    text-align: right;
    font-size: 1.5rem;
    padding: 20px;
    text-align: center;

}

#questions-bar a {
    color: white;
    font-weight: normal;
    text-decoration: none;
    font-weight: bold;
}

#questions-bar a:hover {
    color: rgb(183, 231, 247);
}





ul.navbar {
    list-style-type: none;
    margin: 10px;
    padding: 0;
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

ul.navbar li {
    margin: 0 10px;
}

ul.navbar li:last-child {
    margin-right: 0;
}

ul.navbar li a {
    display: block;
    color: navy;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: color 0.6s ease !important;
}

ul.navbar li a:hover {
    background-color: rgb(183, 231, 247);
}



.button-apt {
    background-color: yellow;
    color: navy;
    border: 2px solid transparent;
    border-radius: 5px;
    padding: 10px 15px;
    margin: 0 10px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.5s ease !important;
}

.button-apt:hover {
    background-color: rgb(183, 231, 247) !important;
    border-color: navy;
}






/* styles.css */
#hero-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url('doc1.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

#hero-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    display: flex;
}

.background-image img {
    width: 33.33%;
    height: 100%;
    object-fit: cover;
}

.hero-text {
    font-size: 3.5rem;
    text-align: center;
    margin: 10px 0;
}


/* styles.css */
#doctors {
    text-align: center;
    padding: 80px 15px;
    color: navy;
}

#doctors h1 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.doctor-card {
    display: inline-block;
    margin: 10px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;

}

.doctor-card:hover {
    transform: scale(1.1);
}

.doctor-card img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    padding: 20px;
}

.doctor-card h2 {
    margin-top: 10px;
    font-size: 1.2rem;
}


.doctor-name {
    margin-top: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.5s ease-in-out, text-decoration 0.3s ease-in-out;
}

.doctor-name:hover {
    color: blue;
    text-decoration:underline;}




footer {
    background-color: navy;
    padding: 20px 0;
    text-align: center;
    color: white;
    margin: 10px 0 0 0;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.footer-menu li {
    margin: 0 10px;
}

.footer-menu li a {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    position: relative;
    transition: color 0.3s ease-in-out !important;
}

.footer-menu li a::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: rgb(183, 231, 247);
    transition: width 0.3s ease-in-out;
}

.footer-menu li a:hover {
    color: rgb(183, 231, 247);
}

.footer-menu li a:hover::before {
    width: 100%;
}
Click to expand...
Hey there,
One simple trick you can try is to add the "!important" flag. What this does is it will override any other background-color styling you may have on that element hover.
CSS: 
ul.navbar li a:hover {
    background-color: rgb(183, 231, 247) !important;
}
 
Upvote 0 Downvote
Thanks Antero. The color hover seems to be working, but my problem is with the time. It seems the 0.3s ease-in-out isn't working. Even if I use !important, it doesn't seem to change.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom