Проблема с: активный стиль и абсолютное позиционирование

Question

ОК, я добавил универсальный стиль моей main.css, который говорит:

a:active { 
    top:1px; 
    position:relative; 
} 

Это дает мне миленький «подталкивать» эффект, когда что-либо кнопки. Следовательно, мне пришлось обойти все мои абсолютно позиционированные элементы и исправить их от прыжков до top:1px и вручную дать им правильный толчок.

Хотя я столкнулся с этим случаем, который бросил меня на петлю на пару уровней. Я думаю, что я все позиционировал, но то, что происходит, когда я нажимаю на якорь, заключается в том, что элемент <span>, следующий в содержащем <li>, исчезает, когда нажимается якорь.

Я попытался установить <span> на float:left, но вместо того, чтобы исчезнуть, он только что начал выстраиваться рядом с якорем и висел за пределами содержащего <li>.

Вот страница: http://beta.helpcurenow.org/media/videos/

Что я имею в виду на этой странице, миниатюры, которые сидят ниже главного окна видео. Есть миниатюрные фиды из vimeo с видеороликом и метаданными. Снимок видеоизображения имеет скрытый диапазон в якоре, так что, когда вы наводите его на миниатюру, он появляется. Это то, что заставляет метаданные исчезать при нажатии.

И если вы хотите, чтобы просто увидеть разметку здесь, это ниже:

<ul id="video-gallery"> 
    <li> 
    <a class="video-thumbnail" href="#"> 
     <img src="http://ats.vimeo.com/775/137/77513796_200.jpg" alt="Amy Fann Interview"/> 
     <span class="play-arrow"></span> 
    </a> 
    <span class="video-metadata" id="video-13466402"> 
     <span class="video-title"><a href="#">Amy Fann Interview</a></span> 
     <span class="video-likes meta">Likes <span class="value">0</span></span> 
     <span class="video-views meta">Views <span class="value">2</span></span> 
     <span class="video-duration meta">Duration <span class="value">01:48</span></span> 
     <span class="video-post-date meta">Posted 1 day and 7 hours ago</span> 
     <span class="video-url hidden-data">http://vimeo.com/13466402</span> 
     <span class="video-description hidden-data">Amy Fann talks about her upcoming trip to Zambia as part of a CURE GO Team.</span> 
    </span> 
    </li> 
</ul> 

И CSS ... (очевидно, есть несколько других правил стиля для этого раздела, но я будет пытаться включать только важные из них)

li a.video-thumbnail span.play-arrow { 
    display:none; 
} 
li:hover a.video-thumbnail span.play-arrow { 
    display:block; 
    width:122px; 
    height:86px; 
    background:url(/img/media/play-arrow.png) no-repeat center top; 
    position:absolute; 
    top:40px; 
    left:50px; 
} 
li:hover a.video-thumbnail:active span.play-arrow { 
    position:absolute; 
    top:30px; 
    left:40px 
} 
li a.video-thumbnail:active { 
    position:absolute; 
    top:auto; 
} 
li.added-video { 
    display: none; 
} 

Answer 1

Этот CSS должен решить вашу проблему (по крайней мере, он сделал для меня в поджигатель):

li a.video-thumbnail:active { 
    position: static; 
} 

li:hover a.video-thumbnail:active span.play-arrow { 
    top: 40px; 
    left: 50px; 
} 

Я точно не знаю, почему ваша мета была скрыта на :active, но вышеизложенное предотвращает изменение типа позиции миниатюры и сохраняет все на своем месте.