css - :active style and absolute positioning 的问题

Question

好的，我在 main.css 中添加了一个通用样式:

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

当单击任何内容时，这会给我一个不错的“轻推”效果。因此，我不得不绕过我所有的绝对定位 <a>元素并修复它们跳到 top:1px并手动给他们适当的插入。

虽然我遇到过这个案例，但它让我在几个层面上陷入了困境。我想我已经把所有的定位都整理好了，但是当我点击 anchor 时发生的是 <span>包含 <li> 的下一个元素单击 anchor 时消失。

我确实尝试设置 <span>至 float:left但它并没有消失，而是开始排在 anchor 旁边并悬卡在包含 <li> 的外面.

这是页面:http://beta.helpcurenow.org/media/videos/

我在此页面上指的是位于主视频窗口下方的缩略图。有来自 vimeo 的缩略图提要，其中包含视频屏幕截图和元数据。视频屏幕截图在 anchor 中有一个隐藏的跨度，因此当您将鼠标悬停在缩略图上时，它就会出现。这就是导致点击时元数据消失的原因。

如果你只想看这里的标记，它在下面:

<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 应该可以解决您的问题(至少它在 firebug 中对我有用):

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

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

我不知道为什么你的元被隐藏在 :active 上，但上面的内容阻止了缩略图链接的位置类型发生变化并保持一切不变。