Here is the HTML code with 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>
This is the CSS styling:
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;
}
The jQuery script included:
$(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 at hand is that when the page loads initially, the background image displays correctly but upon hovering, it sometimes turns white instead of changing to the new image. Additionally, after moving the mouse away, the background remains white rather than reverting back to the default state.
I am seeking assistance in resolving this issue so that the image changes smoothly without any white background interference.