자바 스크립트 롤오버로 클래스 추가

사용자가 롤오버 할 때만 나타나는 이미지의 클래스 그룹을 추가하고 싶습니다.자바 스크립트 롤오버로 클래스 추가

작업 예로서이를 참조하십시오 : 당신은 이미지와 텍스트의 수평 목록을 알 수

http://www.warface.co.uk/clients/warface.co.uk/ (CLICK 상단에서 빨간색 화살표), 원하는 효과를 나열합니다 모든 이미지와 텍스트가있는 노란색 블록은 롤오버 효과가됩니다.

<li><a class="project-thumb"><img src="images/_scroll1s.jpg" alt=""> 
    The London Police</a></li> 
    <li><div class="project-thumb"> 
     <div class="content"> 
      <h2>The London Police</h2></a> 
      <a class="view-project">View Project</a> 
       </div><!--content END --> 
        </div><!--project-thumb END --> 
        </li></ul>

당신이 자바 스크립트 교체 효과에 대한 올바른 마크 업에 대한 조언을 주 시겠어요 CSS.

많은 감사합니다.

출처

2011-01-04 Rob

을 당신 사용자가 이미지 위에 놓을 때 .stop()을 사용해야하므로 작업이 대기열에 저장되지 않습니다. – Cristy

나는 jQuery와 같은 자바 스크립트 라이브러리를 사용하는 것이 좋습니다. jQuery는 호버 이벤트에서 클래스 변경을 아주 쉽게합니다.

<head> 태그에 jquery를 추가하십시오. 호버 이벤트에 대한

<script> 
$(document).ready(function() { 
    // find the image inside the link with the class project-thumb and add a hover event 
    $("a.project-thumb img").hover(
    function() { 
     // add a class to the closest li. $(this) is the image 
     $(this).closest('li').addClass('theClassYouWantToAdd'); 
    }, 
    function() { 
     $(this).closest('li').removeClass('theClassYouWantToRemove'); 
    } 
); 
}); 
</script>

문서 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

이 같은 것을 추가 : 구글의 CDN에서 하나를 사용 http://api.jquery.com/hover/

작동합니다 :)

출처

2011-01-04 11:35:13

이 아담을 매우 고맙게 생각하며, 매우 명확하고 간결하게 내가 무엇을 찾고 있었는지 :) – Rob

문제 없습니다. 도와 줄 수있어서 기뻐. :) –

자바 스크립트 롤오버로 클래스 추가

답변

관련 문제