jQuery backgroundPosition CSS 스프라이트가 함께 작동하지 않습니까?

나는 나의 사진을위한 웹 포트폴리오를 만들기 시작했다. 나는 웹 디자이너가 아니기 때문에 관심이있다. 여기 페이지가 있습니다 : http://jsfiddle.net/RhjJZ/1/ in jsfiddle. <a> 링크에 대한 배경을 만들기 위해 CSS 스프라이트를 만들었습니다. 나는 마우스가 그들 위에있을 때 변화 시켜서 jQuery로 그 스크립트를 만들었고 작동하는 것처럼 보였습니다. 나는 상상할 수 없습니다. 여러 가지 방법으로 시도했습니다 ... 많은 유사한 문제를 검색했습니다. 인터넷하지만 그들은 나를 도울 수 없었다. 누군가 내가 잘못한 것을 지적하면 나는 매우 기뻐할 것입니다! 메뉴의 사진은 1x296 픽셀입니다.jQuery backgroundPosition CSS 스프라이트가 함께 작동하지 않습니까?

출처

2013-02-28 godzsa

은'val' 매개 변수에서 오는? –

onmouseover() from HTML. – godzsa

'menu.png'를 바이올린에 추가 할 수 있습니까? –

menu() 함수가 jQuery 때문에 정상 범위에 있지 않으므로 자바 스크립트 오류 : menu(xx) is not a function이 발생합니다.

해결책은 data- 접두어 속성 체계를 사용하여 하드 코딩 된 값을 설정 한 다음 mouseover 및 mouseout 이벤트를 jQuery로 처리하는 것입니다.

HTML :

<body> 
    <header id="menu"> 
      <h1>dawe's portfolio</h1> 

     <nav> <a id="m_portf" data-one="0" data-two="-37" href="#portfolio" 
      width="1px">portfolio</a> 
    <a id="m_music" data-one="-72" data-two="-111" 
      href="#music">music</a> 
    <a id="m_about" data-one="-148" data-two="-185" 
      href="#about">about</a> 
    <a id="m_contact" data-one="-222" data-two="-259" 
      href="#contact">contact</a> 

     </nav> 
    </header> 
</body>

자바 스크립트 :

$('a').on('mouseover',function(){ 
    $(this).animate({'background-position': '0px ' +$(this).attr('data-one')+'px';}, 1500); 
}); 

$('a').on('mouseout',function(){ 
    $(this).animate({'background-position': '0px ' +$(this).attr('data-two')+'px';}, 1500); 
});

출처

2013-02-28 18:24:31

그래서 mouseover 및 mouseout을 써야합니다. 별도로 ''에 대해 jquery에서 감지합니까? – godzsa

실수로 잘못된 자바 스크립트를 붙여 넣었습니다. 귀하의 질문에 대답하려면, 아니오. –

도와 주셔서 감사합니다! – godzsa

jQuery backgroundPosition CSS 스프라이트가 함께 작동하지 않습니까?

답변

관련 문제