jQuery 클래스 깜박임 토글

jQuery를 사용하여 로고 클래스를 변경하므로 다른 이미지가 표시됩니다. mouseenter 이벤트가 처음 발생하면 깜박입니다.이 이벤트는 mouseleave 나 후속 mouseenter 이벤트에서는 발생하지 않습니다. 왜 그런 생각을 했니?jQuery 클래스 깜박임 토글

내 HTML :

<a href="http://localhost:5000/" class="logo" id="logo"></a>

내 CSS :

.logo { 
    background:url('logo.png'); 
    width:250px; 
    height:42px; 
    display:block; 
    float:left; 
} 

.logo-hover { 
    background:url('logo-hover.png'); 
    width:250px; 
    height:42px; 
    display:block; 
    float:left; 
}

내 거친 jQuery를 : 아마 설명 할 브라우저, 네트워크 연결 속도 등에 따라 다릅니다

$('#logo').mouseenter(function(){$(this).toggleClass('logo-hover')}); 
$('#logo').mouseleave(function(){$(this).toggleClass('logo-hover')});

출처

2011-12-21 Slick23

이유는 'hover'이미지가 서버에 할당 된 클래스를 처음 사용할 때까지 서버에서 요청하지 않기 때문입니다. 그래서 첫 번째 호버 위에서 이미지를 보여주기 전에 이미지를 다운로드해야합니다.

는이 문제를 해결 사용하려면 sprite images 또는 대안 data URIs

출처

2011-12-21 18:03:50 isNaN1247

유일한 문제 데이터 URI는 IE7 지원이 부족하지만 이전에 스프린트를 사용했습니다. 그렇게해야합니다. – Slick23

IE7은 고통이다, id는 동의한다. 추신 : 귀하의 질문에 대답하면 답변으로 표시하는 것을 잊지 마세요 0) – isNaN1247

한 번만 발생하는 이유 - 이미지가 이미로드 된 이후 이벤트 발생시

제 제안은 단일 스프라이트에 이미지를 넣어서 한 번만로드하면 이미지를 변경하는 데 네트워크 지연을 없앨 수 있다는 것입니다.

또 다른 완전히 다른 제안 - CSS를 통합하는 방법을 찾으십시오. float, display, width 등 .logo 클래스 사이에 공통 속성이 많이 있습니다. 원하는 효과를 얻고 CSS를 단순하게 유지하려면 아마도 hover 의사 클래스를 사용하는 단일 클래스를 사용할 수 있습니다.

출처

2011-12-21 18:01:27 n8wrl

완전히 동의합니다 ...이 작업을 수행하는 방법의 예를 추가하는 것이 좋습니다. jquery-ui와 같은 것 : .ui-icon {width : 16px; 높이 : 16px; background-image : url (images/ui-icons_666666_256x240.png); .ui-icon-triangle-1-n {background-position : 0-16px; } – kasdega

단순히 사용하기 쉽게하지 않을까요 : 가져가? 어쨌든 해결책은 두 로고에 하나의 이미지를 사용하고 배경 이미지가 아닌 배경 위치를 변경하는 것입니다.

편집 : a 요소에 일부 콘텐츠를 넣어야합니다 (로고와 동일한 텍스트가 포함될 수 있음). 텍스트 들여 쓰기를 사용할 수 있습니다 : -1000000px; CSS로 제거 할 수 있습니다.

출처

2011-12-21 18:21:46 powerbuoy

jQuery 클래스 깜박임 토글

답변

관련 문제