悬停颜色为自定义CSS锚标记

Question

以下内容呈现为分层文本和图像，即执行CSS3动画的图像。

  <a class="logo" href="/">
    <span class="logotext">Some&nbsp;&nbsp;&nbsp;&nbsp;text</span>
    <div id="f1_container">
      <div id="f1_card">
        <div class="front face">
          <img  src="/assets/4.png" />
        </div>
        <div class="back face center">
          <img src="/assets/4rev.png" />
        </div>
      </div>
    </div>

正在以正确的颜色生成文本，但是没有为悬停

捕获CSS指令

a.logo {
  color: #f6f1ed;
  z-index: 2;
  margin-top: -10px;
  a.logo:hover, a.logo:focus {
    color: #16174f; }
}

#f1_container {
  z-index: 1; }

语法中缺少或错误的是什么？

Answer 1

你的CSS需要看起来像这样。

更改颜色，以便在悬停时很容易看到。

a.logo {
  color: black;
  z-index: 2;
  margin-top: -10px;
}

a.logo:hover, a.logo:focus {
  color: red; }

#f1_container {
  z-index: 1; }

<a class="logo" href="/">
    <span class="logotext">Some&nbsp;&nbsp;&nbsp;&nbsp;text</span>
    <div id="f1_container">
      <div id="f1_card">
        <div class="front face">
          <img  src="/assets/4.png" />
        </div>
        <div class="back face center">
          <img src="/assets/4rev.png" />
        </div>
      </div>
    </div>

Answer 2

将此部分移到a.logo括号

之外

a.logo:hover, a.logo:focus {
    color: #16174f;
}