Trying to create an esthetically pleasing linking hover for the future
Available here for FF Browser.
body {
color:#ffffff;
font-family:"Helvetica";
font-size:12pt;
background-color:#000000;
font-weight:bold;
}
a:link {
color:white;
text-decoration:none;
}
a:hover {
animation: myhover 1s;
transition-timing-function: ease-in-out;
font-weight: bold;
}
@keyframes myhover {
from {
background-color: black;
color: white;
}
to {
background-color: white;
color: black;
}
}
The transition works in what concerns the effect, but for some reason, even if you remain with the cursor on top of the link, it reverts to the FROM state without even a fade back from TO to FROM.
What code change is needed to stay at TO effect, until you take the cursor out of the hovered LINK and it reverts the effect to FROM?
I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.
Many Thanks Alban
You need to set the animation-fill-mode to forwards for the animation to retain the state as at its last keyframe.
animation: myhover 1s forwards;
or
animation-name: myhover;
animation-duration: 1s;
animation-fill-mode: forwards;
Note:
-webkit- prefix as I am testing on Chrome, but the same would work with either the -moz- prefix or without any prefixes.animation do not work like transition. The reverse effect would be better achieved with JavaScript/jQuery as the reverse animation cannot be kicked-off by default on the base class without it appearing once on page load also. Here is a way to achieve both the forward and reverse animation effects using jQuery. jQuery is not a must and the same can be done with vanilla JS also but I just used jQuery for doing a quick sample.Option 3: (Using transtions instead of animations)
If your objective is only to linearly change the background-color and the color properties on mouse hover, then actually transition is a much better option to make use of instead of animation. Transitions can automatically answer both of your concerns. It can make the end state retained till the mouse is hovered out and the hover out will also cause the reverse effect to happen.
a:link {
color:white;
text-decoration:none;
transition: background-color 1s, color 1s;
/*transition: all 1s;*/ /* use this line if you wish to transition all properties */
transition-timing-function: ease-in-out;
}
a:hover {
font-weight: bold;
background-color: white;
color: black;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments