I have made a hover effect for when the mouse hovers over the nav button, however it just pops back into place when the mouse leaves. I am wondering how to properly achieve the effect of hovering on and off.
I have tried adding the transition code to both a and a:hover, however when I do that there is some weird unwanted transition effect every time I navigate to, or refresh the page.
Here is the code:
nav a {
text-decoration: none;
padding: 25px 20px;
transition-property: background color ease-in-out;
transition-duration: 300ms;
transition-timing-function: linear;
}
nav a:hover {
background-color: #28292B;
transition-property: background color ease-in-out;
transition-duration: 300ms;
transition-timing-function: linear;
}
Thanks everyone!
Do it like this instead:
nav a {
text-decoration: none;
padding: 25px 20px;
-o-transition:.5s ease-in-out;
-ms-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-webkit-transition:.5s ease-in-out;
transition:.5s ease-in-out;
}
nav a:hover {
background-color: #28292B;
color:white;
}
Simple and easy.:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.