Add Fadein to existing CSS for mouseover link

Question

Is it possible to take my existing css for a mouseover link with a background image, and make it fade in and out? Which is the best approach for a fadein/out? I'm already using jquery.

.sendB {
    width: 100%;
    height: 125px;
    background: #5266EB url('/img/send.gif') no-repeat 50% 0;
    margin-top: 22px;
    float: left;
}

.sendB:hover {
    width: 100%;
    height: 125px;
    background: #00CE00 url('/img/send.gif') no-repeat 50% -125px;
    margin-top: 22px;
    float: left;
}

Answer 1

jQuery can't directly fade a background image. It has to apply the opacity change to an entire element. The way I've done this in the past is to nest an element inside, give it the background image and then fade the entire element. The markup would be:

<a class="sendB" href="...">
    <span class="background-image-to-fade"></span>
</a>

Once you've got this, it's just a matter of:

$('.sendB').hover(
    function(){
        $(this).fadeIn();
    },
    function(){
        $(this).fadeOut();
    }
);

Answer 2

I don't think you can access psuedoclasses with JavaScript.

However, if you changed that selector to also include .sendB.hover, you could pick that up with jQuery.

One thing to know is that you can't fade a background image. You will need to fade an actual image or an element inside with a background image. You'll need to use absolute positioning.