Menu
First, I am a beginner. I want a step by step instruction.
I want to add a smooth background hover effect to my links in Wordpress
a { color:#000;} a:hover { background-color: #d1d1d1; color:#fff; } I want the hover on links slow, instead of instant. Do I need any JavaScript or jQuery ? If so, please tell me how to do that.
292
Use the @supports (transition) feature query instead. The -webkit-transition Boolean non-standardCSS media feature is a WebKit extension whose value is true if the browsing context supports CSS transitions. Apple has a description in Safari CSS Reference; this is now called transition there.
To set the speed of the hover, use the transition-duration property. To set the hover, use the :hover selector.
In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.
Since this is a cosmetic effect, it shouldn't be too vital that this fires. Given that, you might want to look at CSS 3 transformations.
a { color: #000; transition: background 0.5s linear; } a:hover { background-color: #d1d1d1; color: #fff; }<a href="http://example.com">Hover me</a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
