如何从只有 HTML/CSS 的整个页面中删除 :target pseudo-class？

Question

我有一个作业，我在屏幕左侧有一个菜单上的项目列表。单击菜单项时，它们应该仅使用 CSS/HTML 移出菜单。

我能够通过结合使用 :target 伪 class 和 href 标签来实现这一点。但后来我意识到我不能回到原来的菜单，因为菜单项总是被定位并保留在菜单之外。

起初，我以为在目标div中再次单击会删除伪class，但显然，它没有任何作用。

我认为 return 菜单恢复其原始结构的最佳方法是取消定位当前项目而不单击其他项目。

这里是 HTML:

<a class="card" id="card1" href="#card1">
  <div class="avatar"></div>
  <div class="info">
    <p>Leah Shapiro</p>
    <p>leah.shapiro@gmail.com</p>
  </div>
</a>

<a class="card" id="card2" href="#card2">
  <div class="avatar"></div>
  <div class="info">
    <p>Rob Been</p>
    <p>leah.shapiro@gmail.com</p>
  </div>
</a>

<a class="card" id="card3" href="#card3">
  <div class="avatar"></div>
  <div class="info">
    <p>Peter Hayes</p>
    <p>leah.shapiro@gmail.com</p>
  </div>
</a>

和 CSS:

.list {
  height: 100%;
  width: 200px;
  background: #dddddd;
  float: left;
}

.list .card {
  border: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
}

:target {
  z-index: 1000;
  background-color: red;
  position: absolute;
  left: 300px;
  top: 200px;
}

https://codepen.io/maydanachi/pen/QXPYvy

我找到了很多我可以使用的 JS 片段，但要求明确指出我只使用 CSS/HTML。

Answer 1

只需使用 :focus 而不是 :target

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  position: relative;
}

.screen {
  height: 100%;
  width: calc(100% - 200px);
  background-color: tomato;
  float: right;
}

.list {
  height: 100%;
  width: 200px;
  background: #dddddd;
  float: left;
}

.list .card {
  border: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
}

.list a {
  text-decoration: none;
}

:focus {
  z-index: 1000;
  background-color: red;
  position: absolute;
  left: 300px;
  top: 200px;
}

.list .card:hover {
  cursor: pointer;
  background-color: rgba(143, 143, 143, 0.8);
}

.list .card:active {
  background-color: teal;
}

.list .avatar {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background-color: #ccc;
  user-select: none;
}

.list .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  user-select: none;
}

.list .info p {
  margin: 0;
  padding-left: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="./style.css" />
</head>

<body>
  <div class="list">

    <a class="card" id="card1" href="#card1">
      <div class="avatar"></div>
      <div class="info">
        <p>Leah Shapiro</p>
        <p>leah.shapiro@gmail.com</p>
      </div>
    </a>

    <a class="card" id="card2" href="#card2">
      <div class="avatar"></div>
      <div class="info">
        <p>Rob Been</p>
        <p>leah.shapiro@gmail.com</p>
      </div>
    </a>

    <a class="card" id="card3" href="#card3">
      <div class="avatar"></div>
      <div class="info">
        <p>Peter Hayes</p>
        <p>leah.shapiro@gmail.com</p>
      </div>
    </a>

    <a class="card" id="card4" href="#card4">
      <div class="avatar"></div>
      <div class="info">
        <p>Dave Catching</p>
        <p>leah.shapiro@gmail.com</p>
      </div>
    </a>

    <a class="card" id="card5" href="#card5">
      <div class="avatar"></div>
      <div class="info">
        <p>Josh Homme</p>
        <p>leah.shapiro@gmail.com</p>
      </div>
    </a>

  </div>
  <div class="screen"></div>

</body>

</html>

如何从只有 HTML/CSS 的整个页面中删除 :target pseudo-class？

How to remove :target pseudo-class from the entire page with HTML/CSS only?

html

css

target