CSS : 한 요소에서 다른 요소로 연결 효과

Question

이미지 A와 이미지 B가 있습니다. 이들은 페이지의 다른 위치에 있습니다. 이미지 A 위로 마우스를 가져 가면 CSS 애니메이션이 첨부됩니다. 이미지 A 위에 마우스를 가져갈 때 이미지 B에 동일한 애니메이션을 첨부하고 트리거하고 싶습니다. CSS로 가능합니까? jQuery를 더 잘 사용해야합니까? 그리고 jQuery가 어떻게 CSS 애니메이션을 트리거 할 수 있을까요?

Answer 1

를 사용하여 유혹에이 클래스를 적용 A와 B 모두를위한 클래스를 생성 그냥 CSS로 끝났다.some ways of doing this이 있지만 크로스 브라우저 지원에 대해서는 확실하지 않습니다.

ImageA를 가리키는 동안 이미지 B에서 애니메이션을 사용하려면 jQuery가 필요합니다.

호버에서 CSS 애니메이션을 언급했습니다. jQuery를 사용하여 ImageA 유혹하는 동안 ImageB에 hoverAnimation 클래스를 적용 할 수 있습니다 지금

.imageA:hover, .hoverAnimation 
{ 
    //styles 
} 

: 그러므로 나는 이것은 변경 될 수 있습니다 당신은 사이비 상태?

.imageA:hover 
{ 
    //styles 
} 

에 대해 서로 다른 스타일을 의미 가정

$(function(){ 
    $("img.imageA").hover(function(){ 
    $("img.ImageB").addClass("hoverAnimation"); 
    } 
    ,function(){ 
    $("img.ImageB").removeClass("hoverAnimation"); 
    }); 
}); 

-- DEMO --

Answer 2

편집 (커트 덕분에) 요청 문제를 해결하기 위해 :

$(document).ready(function(){ 
    function mouseoverHandler(e){ 
     $(image B).addClass('animate-result-class'); 
     $(image A).one('mouseout', mouseoutHandler); 
    } 

    function mouseoutHandler(e){ 
     $(image B).addClass('animate-result-class'); 
     $(image A).one('mouseover', mouseoverHandler); 
    } 
    $(image A).one('mouseover', mouseoverHandler); 
}); 

Answer 3

다음이 될 수 없다 jQuery를 addClass()에게 옵션

Answer 4

T 그의 B가 A 형제이거나 B 형제가 A 형제의 컨테이너 인 경우 인 경우 B가 A 이하를 타겟팅 할 수 있다면 CSS에서 절대적으로 가능합니다 (). 즉 은 img.B의 CSS 선택자에 있어야합니다. 여기

/* if A is immediately preceded by B */ img.A:hover {...} img.A:hover + img.B {...} /* if A is later preceded by B (same parent element) */ img.A:hover {...} img.A:hover ~ img.B {...} /* if B is in a container that is a sibling of A */ img.A:hover {...} img.A:hover ~ div.container img.B {...} 

는 데모입니다 :

뭔가처럼 http://jsfiddle.net/rgthree/GE7UP/

이 선택자는 IE6에서 작동하지 않습니다,하지만 당신은 CSS 애니메이션을 사용하고 있기 때문에, 지금 : 당신이 관심 의심 , img.B을 img.A 아래로 타겟팅 할 수없는 경우 클래스 이름을 조작하려면 자바 스크립트를 사용해야합니다.