jQuery fade in background image on hover

jquery

Solution

Since it is not possible to fade background only while text in the block is visible, you can make small changes in the markup:

HTML:

<div class="menuitem"><span></span>ITEM 01</div>

CSS:

.menuitem {
    position: relative;
    /* ... */
}
.menuitem span {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-image: url(http://thumbs.gograph.com/gg58916312.jpg);
    z-index: -1;
}​

JavaScript:

$(".menuitem").hover(function() {
    $(this).children("span").fadeIn();
}, function() {
    $(this).children("span").fadeOut();
});​

DEMO: http://jsfiddle.net/JdHWY/11/

Problem

I have a row of menu buttons, and I need the background-image to be transparent, and then fade in on rollover (hover). can I use jQuery to acheive this? http://jsfiddle.net/craigzilla/JdHWY/

Original source