為什么有時懸停不顯示背景圖像

Question

我有以下具有背景圖片的HTML：

<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;
    });
}

我遇到的問題是，當頁面首次加載時，會顯示圖像，但是當我將鼠標懸停在要更改的圖像上時，大多數時候背景圖像變成白色，而不是顯示更改的圖像，然后當我移動鼠標時離開后，背景保持白色，而不是返回到默認圖像。

請幫助我解決它，以便圖像更改並返回默認狀態而不顯示白色背景。

Answer 1

嘗試將CS​​S從使用.fp更改為#fp