이미지 스프라이트와 함께 JQuery 사용

현재 내 탐색을 위해 CSS와 이미지 스프라이트를 사용하고 있습니다 (아래 코드). 의도 한대로 작동하지만 페이드로이 전환을 쉽게하고 싶습니다.이미지 스프라이트와 함께 JQuery 사용

나는 이것을 위해 JQuery를 사용하는 것이 가장 좋다고 생각하지만, Javascript를 사용하지 않는 사람들을위한 지원을 추가하기 위해 CSS를 남기고 싶습니다. 아무도이 '협업'을 달성하는 방법의 올바른 방향으로 나를 가리킬 수 있습니까?!

HTML :

<ul id="menu"> 
    <li id="home"><a href="#"></a></li> 
</ul>

CSS :

nav 
{ 
    margin-top: 17px; 
    float: right; 
} 

nav #menu 
{ 
    display: block; 
    height: 22px; 
    margin: 0px; 
    padding: 0px; 
} 

nav #menu li 
{ 
    list-style-type: none; 
    float: left; 
    padding-left: 28px; 
} 

nav #menu li a 
{ 
    background: url(/Content/Images/navigation.png) no-repeat; 
    height: 22px; 
    display: block; 
} 

nav #menu #home 
{ 
    width: 53px; 
} 

nav #menu #home a:hover 
{ 
    background-position: 0 -22px; 
}

출처

2011-10-16 Jonathan

내가 할 것 두 가지 중 하나를 jQuery를에 animate 기능

1) 실험.

<ul> 
    <li><span class="bg-image" /><a href="#"></li> 
</ul>

는 다음과 같이 jQuery를 사용합니다 :

$(document).ready(function() { 
    $("#menu li a").bind("mouseover", function() { 
     $(this).siblings("span.bg-image").css("background", "url(URL TO IMAGE)").hide().fadeIn(100); 
    }) 
});

반복하고로 마우스를위한없는 뜨거운 이미지를 사용
2) li에 래퍼를 작성합니다. 뜨거운 상태가 아니라면 투명 위치 표시기 유형 이미지를 사용할 것이라고 가정합니다. 너비/높이가 핫 클래스와 동일한 지 확인하십시오.

출처

2011-10-16 01:25:05 Sam

본문에 클래스를 추가하고 개봉 직후 자바 스크립트로 제거하십시오. 당신은 자바 스크립트

.nojs #boton1:hover {background: url(navigation.png) no-repeat;}

없이 모든 사람을위한 어떤 규칙을 추가 할 수 있습니다 만 명에 대한 규칙을 만들기 위해 CSS를 지금

<body class="nojs"> 
<script>$("body").removeClass("nojs").addClass("js")</script>

자바 스크립트와

.js #boton1 {}

활성화

출처

2011-10-16 02:00:47

이미지 스프라이트와 함께 JQuery 사용

답변

관련 문제