이유는 배경 이미지는 언젠가 호버

에 표시되지 않습니다 않는 I가 배경 이미지가 다음과 같은 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; 
    }); 
}

을

내가 겪고있는 문제는 페이지가 처음로드 될 때 이미지가 표시되지만 이미지를 변경하려면 마우스로 가리키면 대부분의 시간 e 배경 이미지가 변경된 이미지를 표시하는 대신 흰색으로 바뀌고 마우스를 움직이면 배경이 흰색 대신 기본 이미지로 돌아갑니다.

흰색 배경을 표시하지 않고 이미지가 변경되고 기본 상태로 돌아가도록 도와주세요.

출처

2014-11-11 Si8

왜 CSS의 ': hover' 의사 선택기를 사용하지 않는 것이 맞습니까? – somethinghere

나는 CSS': hover'와 JQuery를 넣었고, 마우스를 빨리 움직이면 배경을 보여주기 위해 초를 걸리고 그 시간 동안 흰색을 보여준다. – Si8

그 이유는 배경 이미지가 실제로 처음으로로드 되었기 때문입니다.이 경우 스프라이트를 사용하여 사용자가 이동하기 전에 이미지를로드해야합니다. 스프라이트에 대한이 문서를 확인하십시오. (W3Schools의 유용함) http://www.w3schools.com/css/css_image_sprites.asp – somethinghere

CSS를 #fp로 변경해보십시오.

출처

2014-11-11 16:14:01 boxsome

이유는 배경 이미지는 언젠가 호버

답변

관련 문제