내용이 서로 다른 모든 div에 표시/숨기기 클래스 div 적용

Question

이것은 아마도 간단한 질문 일 수 있지만 몇 가지 방법을 시도한 후에 몇 가지 조언이 필요합니다.

나는 당신이 그들을 가리키면 각 div마다 다른 내용으로 다른 div (툴팁처럼 행동하는)를 보여줄 것입니다. 제공된 jsFiddle은 빨간색 div에 예제를 보여줍니다. 내가 jQuery를 통해 달성하고자하는 것은 콘텐츠를 div로 만드는 다른 div보기 위로 마우스를 가져갈 때입니다.

현재로서는 divs (파란색과 빨간색)가 2 개 있고 jQuery가 제공되는 빨간색으로 만 작업 할 수 있습니다. 여러 div에서 어떻게 작동합니까?

그러나 나는이 예제를 다른 플러그인에서 사용하고 있는데 슬라이더 내부의 툴팁과 충돌이 매우 심하다. 사람이 어디서부터 시작 나를 인도 할 수있는 경우

http://jsfiddle.net/DeRx8/1/

$('.red').hover(function() { 
     $(".tooltip").fadeIn(250); 
    }, function() { 
     $(".tooltip").fadeOut(250); 
    }); 

그것은 좋은 것입니다.

덕분에 다수의 선택으로

내가 요법, 녹색, 빨강, bluc, 핑크 10 된 div를해야 할 것입니다

PS의 * ..

Answer 1

.tooltip이

$(document).ready(function() { 
    $('.red,.blue').hover(function() {   
     $(this).next(".tooltip").fadeToggle(250); 
    }); 
}); 

http://jsfiddle.net/Sq5nP/

을 수행 할 수 있습니다 당신의 툴팁이 항상 당신이 그들 모두에게 공통의 클래스를 추가 할 수 없습니다 다음 형제

.red+.tooltip { 
    display:none; 
    background-color:#993; 
    width:50px; 
    height:50px; 
    position:absolute; 
    right:60px; 
    top:40px; 
} 
.blue+.tooltip { 
    display:none; 
    background-color:blue; 
    width:50px; 
    height:50px; 
    position:absolute; 
    right:170px; 
    top:10px; 
} 

http://jsfiddle.net/yyrp7/

Answer 2

$(document).ready(function() { 
    $('.red, .blue').hover(function() { 
     $(".tooltip").fadeIn(250); 
    }, function() { 
     $(".tooltip").fadeOut(250); 
    }); 
}); 

Demo Fiddle

Answer 3

당신이 할 수있는 do

$(document).ready(function() { 
$('.red,.blue').hover(function() { 
    $(this).next(".tooltip").fadeIn(250); 
}, function() { 
    $(this).next(".tooltip").fadeOut(250); 
}); 
});  

당신이 일을 배치하려면 6,

http://jsfiddle.net/DeRx8/3/
UPDATE

$(document).ready(function() { 
$('.red,.blue').hover(function() { 
    var left=$(this).offset().left+$(this).width()-40; 
    $(this).next(".tooltip").css("left",left).fadeIn(250); 
}, function() { 
    $(this).next(".tooltip").fadeOut(250); 
}); 
});  

위치
http://jsfiddle.net/DeRx8/5/