CSS: lighten an element on hover

Question

Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered?

The use case is tha

Answer 1

you should use the RGBa method (background-color:rgba(R,G,B,alpha);) to do this:

.element{
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
} 
.element:hover{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

FIDDLE

AND if you strongly need to make it work in IE8 or lower too here is how it comes:

.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;
}

note that the startColorstr and endColorstr values are built like this #AARRGGBB (where AA is the Alpha channel) and must be the same if you don't want a gradient effect from a color to another.