CSS 翻转卡：如何通过选项卡激活翻转，以便可以通过键盘访问？

Question

我发现了一些关于如何使用 CSS 制作翻页卡的精彩教程。但我的问题是如何使这个键盘易于使用。换句话说，对于仅使用键盘的残障用户来说，希望他们能够仅使用选项卡按钮（从而获得焦点），并且卡片将翻转以显示背面内容并允许选项卡选择链接在卡的背面。

我用 Google 搜索并找到了一些建议（请参阅下面我尝试过的 jsfiddle），但我无法获得成功。

这是一个很棒的网站，具有此功能，但我不知道他们是如何实现的： https: //businessexpress.maryland.gov/

请注意，如果您在上面的页面上按住 Tab 键，最终您的卡片将会翻转，然后您可以通过 Tab 键浏览它们上的链接。例如，对于第一张翻转卡，有一个链接“/plan”，然后它有“/plan/create-business-plan”等子链接。

请注意，我尝试在第 21 行添加一些 CSS，这会影响“active”和“focus”伪类。但只有悬停才能使卡片翻转。我希望点击任何链接都会翻转卡片，就像上面的 maryland.gov 示例一样。

我在这里包含了一个 jsfiddle （有一个小输入元素，因此您可以从中开始切换）： https: //jsfiddle.net/anrbhcmv/

HTML：

    <div id="content">
        <h1>Small Business Resources</h1>

    <input type="text">
    <br><br>

        <div class="flip-card">
            <div class="flip-card-inner">
                <a href="#" id="flip-card-inner">
                    <div class="flip-card-front">
                        <div>Card-front content</div>
                    </div>
                </a>
                <div class="flip-card-back">
                    <a href="https://www.google.com">Google</a>
                    <div>Text</div>
                </div>
            </div>
        </div>

    </div><!-- end #content -->

CSS：

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    // border: 1px solid #f1f1f1;
    // perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner{
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #008CCC;
    background-color: azure;
    color: white;
    color: black;
}

/* Style the back side */
.flip-card-back {
    background-color: #99CC66;
    color: white;
    transform: rotateY(180deg);
}

Answer 1

您可以使用:focus-within伪类：

.flip-card:focus-within .flip-card-inner

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  // border: 1px solid #f1f1f1;
  // perspective: 1000px; /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner,
.flip-card:active .flip-card-inner,
.flip-card:focus .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #008CCC;
  background-color: azure;
  color: white;
  color: black;
}


/* Style the back side */

.flip-card-back {
  background-color: #99CC66;
  color: white;
  transform: rotateY(180deg);
}

<div id="content">
  <h1>Small Business Resources</h1>

  <input type="text">
  <br><br>

  <div class="flip-card">
    <div class="flip-card-inner">
      <a href="#" id="flip-card-inner">
        <div class="flip-card-front">
          <div>Card-front content</div>
        </div>
      </a>
      <div class="flip-card-back">
        <a href="https://www.google.com">Google</a>
        <div>Text</div>
      </div>
    </div>
  </div>

</div>
<!-- end #content -->