JQuery와 애니메이션은 호버

http://www.incg.nl/blog/2008/hover-block-jquery/

의 예를 따라 그리고 그했다. 내가 한 일은 그것을 더 크게 만들고 배경 이미지를 추가 한 것입니다. 호버 애니메이션을 배경 이미지의 특정 지점으로 이동하도록 CSS를 조정했습니다. 그것도 모두 작동하지만 배경 이미지 위에 아무 곳이나 가져 가면 움직입니다. 애니메이션 이미지 위에 마우스를 올리거나 여백 같이 설정할 수 있습니다.

JS :

$(function() { 
    $('ul.hover_block li').hover(function() { 
     $(this).find('img').animate({ 
      top: '374px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }, function() { 
     $(this).find('img').animate({ 
      top: '0px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }); 
    $('ul.hover_block2 li').hover(function() { 
     $(this).find('img').animate({ 
      left: '178px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }, function() { 
     $(this).find('img').animate({ 
      left: '0px' 
     }, { 
      queue: false, 
      duration: 500 
     }); 
    }); 
});

CSS :

body { 
    background: #666 
} 

ul.hover_block { 
    display: block; 
    overflow: hidden; 
    height: 1%; 
    padding-bottom: 15px; 
} 

ul.hover_block li, ul.hover_block2 li { 
    list-style: none; 
    float: left; 
    background: #fff; 
    padding: 10px; 
    padding-left: 315px; 
    padding-top: 78px; 
    width: 500px; 
    position: relative; 
    margin-right: 20px; 
    background-image: url('images/2.png'); 
    background-repeat: no-repeat; 
} 

ul.hover_block li a, ul.hover_block2 li a { 
    display: block; 
    position: relative; 
    overflow: hidden; 
    height: 400px; 
    width: 500px; 
    padding: 16px; 
    color: #000; 
    font: 1.6em/1.3 Helvetica, Arial, sans-serif; 
} 

ul.hover_block li a, ul.hover_block2 li a { 
    text-decoration: none 
} 

ul.hover_block li img, ul.hover_block2 li img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
}

HTML : 내가 당신을 사용하여 선택기를 생각

<body> 
    <ul class="hover_block"> 
     <li> 
      <a href=""><img src="images/3.png" alt="" /> </a> 
     </li> 
    </ul> 
</body>

출처

2012-05-04 user1375893

당신은 (이미지 맵을 사용하지 않을 수 있습니다 나를 권유), 호버 기능을 부착 할 작은 요소를 만들 수 있습니다. – adeneo

"ul.hover_block 리는"목록 요소 위에 마우스를 말한다 , 이것은 이미지가 아닙니다. 오히려 그것이 작동해야 리보다 IMG을 의미한다 뭔가 선택기를 변경하는 경우

이 봐 유무 : jsfiddle.net/edddotcom/eYp99/

출처

2013-04-21 20:34:12 Edd

JQuery와 애니메이션은 호버

답변

관련 문제