Fade Background But NOT Text

I have applied a CSS fade in/out solution to a div, which im happy with, for the most part. However I only want to apply it to the background, not the text. I need the text to be f

Solution 1:

You should be animating on background-color not opacity. FYI if this is all you're doing you should use transitions instead of animations, they're much simpler.

jsFiddle

a.tab {
    position:relative;
    font-family: arial;
    font-weight: bold;
    background-color:rgba(212,212,212,.2);
    -moz-transition:background-color 1.5s ease;
    -webkit-transition:background-color 1.5s ease;
    transition:background-color 1.5s ease;
}

a.tab:hover {
    background-color:rgba(212,212,212,1);
}

Solution 2:

No need to use animations for this and write such a bulky code. If you just need to change the background keeping the text as it is, you should use CSS Transitions instead. They are much simpler and easy to use and this can be achieved with very few lines of code. Here is the fiddle demo

http://jsfiddle.net/gUAPV/37/

a.tab {
    background-color: #f4f4f4; 
    font-family: arial;
    font-weight: bold;
    font-size : 40px;
}

a.tab:hover {
   background-color:#d4d4d4;

   -webkit-transition: background 300ms ease-in 200ms;
   -moz-transition: background 300ms ease-in 200ms;
   -o-transition: background 300ms ease-in 200ms;
   transition: background 300ms ease-in 200ms;
}

I have increased the Font size to make it more prominent to see, you can adjust according to your use.

P.S. If you want to read some more about CSS Transitions here are some useful links

W3.Org Link

Mozilla Develper Forum Link

Hope this helps :)