Сложенные div требуют активного состояния наведения z-index

Question

Если вы посмотрите на мою страницу , расположенную здесь , вы увидите сложенные div.Они плавают влево и имеют отрицательное правое поле.Когда вы наводите на них курсор, им присваивается z-индекс 100, что приводит их к вершине стека.Однако, когда вы идете слева направо, вы замечаете, что тот, с которого начался стек, все еще находится прямо за наведенным, поэтому тот, над которым вы зависли ранее, падает за стеком, делая правый или левый столбец невидимым.

Моя идея решить эту проблему состояла в том, чтобы дать каждой «активной» карточке z-индекс 99, при этом карточки находятся в нормальном состоянии z-index 98. Однако это не работает: - (

У вас есть идеи, чтобы решить мою дилемму?

.card {
margin-right:-670px;
float:left;
width:700px;
height:500px;
background:#EEE;
-moz-box-shadow: 2px 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px 2px #000;
position:relative;
z-index:98;
}

.card:visited {
z-index:99;
}

.card:hover {
z-index:100;
}

Редактировать:

Вот так будет выглядеть мой конечный продукт. Спасибо за предложения, но они не совсем ответы.

Answer 1

Вы могли бы добиться большего успеха с другим подходом.

Ваши карты помещаются в качестве фона в пределах тонких div, как вы уже делаете, но также имеете полную видимость карты: спрятаны в той же позиции. Наведите курсор мыши на край карты и измените видимость, чтобы показать ее для полной карты. Отключение мыши и видимость снова скрываются.

Попытка сложить их так, чтобы они все были видны, и т. Д. Напрашивается на неприятности:)

Answer 2

См. здесь , чтобы получить бесплатный способ достичь того, чего вы хотите.Я согласен с zagnut об использовании изображений в качестве фона, чтобы ваши дивы смотрели на this , чтобы найти способ добиться этого.Я также рекомендовал бы общую очистку вашего HTML

Answer 3

Вы понимаете, что "активный" переводится как "в данный момент нажимается", верно?

Я не понимаю, как в любом случае выполнить то, что вы хотите, без jquery или javascript.