javascript - 如何在 CONTENT css 中使用 href？

Question

我有一个盒子如下:

将鼠标悬停在上面的框上时，框会翻转为:

这是 block 的 HTML 代码:

<div class='tiles'>
  <div class='col'>
    <a href=""></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href=""></a>
    <div class='box'></div>
  </div>

我使用 CSS 显示使用 content 的值前后:

       .col:nth-child(2) .box:before {
        content: "Maps Available";
        background: #e4a001;
        }
        .col:nth-child(2) .box:after {
          content:' Google Map : Click    \A'
          'Apple Map: Click \A  \A';

          background:#e4a001;
        }

现在在上面的代码中，我想包含“href”，这样当用户点击“click”(如第二张图片所示)时，用户将相应地定向到 google 和 apple map 。我尝试使用 attr(href) 但它不起作用。我也明白我们不能把 href 放在 CSS 中。 我知道不能使用 CSS 来实现此目的。还有其他选择吗？？ 欢迎任何帮助。

Answer 1

只需根据需要显示和隐藏链接:

.box {
  width:150px;
  height:150px;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.front, .back {
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  transition:transform 0.5s linear;
  background-color:#f44336;
  backface-visibility: hidden;
}

.back {
  transform:rotateY(180deg);
}

.box:hover .front {
  transform:rotateY(180deg);
}

.box:hover .back {
  transform:rotateY(0deg);
}

<div class="box">
  <div class="front">
    Maps
  </div>
  <div class="back">
    Google Map: <a href="http://www.google.com">Click</a>
    <br><br>
    Apple Map: <a href="http://www.apple.com">Click</a>
  </div>
</div>