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

为什么背景图像有时不会在悬停时显示

1 个答案: