Why does the background image sometime doesn't show on hover

Question

I have the following HTML which has a background image:

<a href="find_provider.aspx" class="tabText" title="F">
    <div id="fp" class="mainImageNav floatLeft fp">
        <img src="theImages/icon.png" class="tabIcon vertAlign" title="F" alt="F" /> Find P
    </div>
</a>

CSS:

a.tabText {
    color: #FFF;
}
.mainImageNav
{
    width: 25%;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    font-size: small;
    color: #FFF;
    font-family: 'Arial', 'Verdana';
    font-weight: bold;
}
.fp
{
    background: url('NotActive.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.floatLeft {
    float: left;
}
.tabIcon
{
    width: 30px;
    height: 30px;
}
.vertAlign {
    vertically-align: middle;
}

JQuery:

$(function () {
    preload([
    '../theImages/Active.png',
    '../theImages/NotActive.png',
    ]);

    $('#fp').hover(function () {
        $('#fp').css("background-image", "url('Active.png')");
    }, function () {
        $('#fp').css("background-image", "url('NotActive.png')");
    });
});

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img/>')[0].src = this;
    });
}

The issue I am having is, when the page first loads, the image is shown but when I hover over for the image to be changed, most of the time the background image becomes white instead showing the changed image and then when I move my mouse away, the background remains white instead going back to the default image.

Please help me resolve it, so that the image changes and goes back to the default state without displaying a white background.

Answer 1

Try changing your css from using .fp to #fp