first-child selector를 사용하면 어떻게됩니까? : 호버를 사용하여 갤러리에 정보 패널을 표시 하시겠습니까?

Question

회원 사진의 명단을 작성하려고합니다. 사용자가 이미지 위로 마우스를 가져 가면 정보가 이미지에서 슬라이드 아웃되거나 설명 및 링크가있는보기로 사라집니다. 명부는 자주 바뀌고 멤버의 주문은 점수를 계산하는 스크립트로 조정해야 할 수도 있습니다.

내가 지금하고있는 퍼즐의 부분은 계시입니다. 도움을 받아 이제 내용을 표시 할 수 있지만 CSS 전환은 이상하고 어색합니다. 이러한 정보 창을 만드는 데 권장되는 방법은 무엇입니까? Z- 색인을 사용하여 perphas?

CSS

*{ 
     -webkit-transition: all 2s ease-in-out; 
     -moz-transition: all 2s ease-in-out; 
     -o-transition: all 2s ease-in-out; 
     transition: all 2s ease-in-out; 
} 


.dude>:first-child{ 
     width:0px; 
     height:0px; 
     float:left; 
     visibility:hidden; 
} 

    .dude:hover > :first-child { 
     width: auto; 
     height: auto; 
     visibility:visible; 
     float:none; 

} 

HTML

<table> 
<thead><h4>Roster</h4></thead> 
<tbody> 
<tr> 
<td><div class="dude"><div>THIS INFORMATION WILL APPEAR LIKE MAGIC</div><img alt="Scott" src="madeupphotoname.jpg" /><b>Scott</b></td> 
<td><div class="dude"><div>THIS INFORMATION WILL APPEAR LIKE MAGIC</div><img alt="Sally" src="madeupphotoname2.jpg" /><b>Sally</b></td> 
</tr> 
</tbody> 
</table> 

여러분의 인내와 재능에 감사드립니다. 관심이 있으신 분은 jsfiddle of my project입니다.

Answer 1

이 문제를 처리 할 수있는 방법은 다양합니다.

이 FIDDLE 당신에게

각 TD 이미지와 두 개의 div의를 포함하는 하나의 방법을 보여줍니다. 텍스트를 포함하는 텍스트는 숨겨져 있으며 holderdiv 위에 마우스를 올리면 읽혀집니다.

텍스트는 제목 아래의 div로 이동되지만 슬라이더, 팝업, 풍선 등과 같이 장소에 관계없이 표시 할 수 있습니다.

나는 Paulie_D의 의견에 동의하지만, "first-cut"으로 테이블은 괜찮습니다.

JS

$('.holderdiv').mouseover(function(){ 
    $('.showme').html( $(this).text()); 
}); 
$('.holderdiv').mouseout (function(){ 
    $('.showme').html( ''); 
}); 

jsFiddle : 내가 말할 것 http://jsfiddle.net/timspqr/fyXby/5/