javascript - 为什么悬停时背景图像有时不显示

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

尝试将您的 css 从使用 .fp 更改为 #fp