Question

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

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

当点击任何内容时，这给了我一个很好的小“轻推”效果。因此，我不得不绕过我所有绝对定位的<a>元素并修复它们跳到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应该解决你的问题（至少它在firebug中对我有用）：

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

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

我不确切知道您的元素隐藏在:active上的原因，但上述内容可以防止缩略图链接的位置类型发生变化，并保留所有内容。

问题a：主动式和绝对定位

1 个答案: