Как использовать селектор с первым ребенком и: наведите указатель мыши на создание информационной панели в галерее?

Question

Я пытаюсь создать список фотографий участников. Когда пользователь нависает над изображением, информация скользит из изображения или исчезает в представлении с описанием и ссылками. Список будет часто меняться, и порядок участников может быть скорректирован сценарием, который вычисляет их баллы.

Часть головоломки, над которой я сейчас работаю, - это раскрытие. С помощью теперь я могу сделать содержимое, но переход CSS является странным и неудобным. Каков рекомендуемый подход к построению такой информационной панели? Использование z-index, 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 покажет вам один из способов

Каждый тд содержит изображение и две дивы. Текст, содержащий текст, «скрыт» и читается только при наведении указателя мыши на держатель.

Текст перемещается в раздел под заголовком, но его можно поместить куда угодно, например, ползунок, всплывающее окно, пузырь и т. Д., Как вы считаете нужным.

Я согласен с комментариями Paulie_D, но в качестве «первого разреза» таблица в порядке.

JS

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

jsFiddle: http://jsfiddle.net/timspqr/fyXby/5/