Question

我正在开发一个php应用程序，它接受搜索词，附加一些文本，并返回一些与搜索结果匹配的YouTube视频。视频显示在iframes中，并包含在div中，如此

<div class="wrap" data-covertext="SomeText">
  <iframe type="text/html" width="200" height="200" src="http://www.youtube.com/embed/SomeVideoId" frameborder="0">
  </iframe>
</div>

和CSS

.wrap {
  position: relative;
  border-width: 30px;
  border-color: rgba(0,0,0,0);
  border-style: inset;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: right;
  background-color: rgba(255,255,255,1);
  transition: color 1s, border-color 2s ease, border-width 1s ease;
  color: rgba(0,0,0,0);
}


.wrap:after {
  z-index: 1;
  content: attr(data-covertext);
  position: absolute;
  background-color: rgba(255,255,255,1);
  color: rgba(0,0,0,1);
  opacity: 1;
  font-size: 24px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  border: transparent solid 20px;
  transition: z-index 2s, opacity 1s steps(4,end), color 500ms;
}

.wrap:hover {
  color: rgba(0,0,0,1);
  border-width: 1px;
  border-color: rgba(0,0,0,0.5);
}

.wrap:hover:after {
  background-color: rgba(255,255,255,0);
  z-index: -1;
  color: rgba(0,0,0,0);
  opacity: 0;
 }

每个div都有一个“封面”，使用:after qseudo-class，然后在:hover上删除，以便他们可以看到嵌入的视频。我想有一些方法可以突出显示哪个div包含他们点击的最后一个视频。这是一个问题。有没有办法用CSS做到这一点？我知道使用jQuery会很容易，但这个项目的全部原因是为了学习更高级的CSS3，所以我试着在没有任何javascript的情况下做任何事情。

我尝试过使用内部/外部a标记并使用:visited（以及其他伪选择器/类），但无法使用任何内容。这样的东西甚至可以用CSS选择吗？我知道出于安全原因，可以合并哪些伪选择器。任何提示将不胜感激。

突出显示最后点击的div CSS

0 个答案: