如何仅使用 HTML/CSS 从整个页面中删除 :target 伪类？答案

【问题标题】：How to remove :target pseudo-class from the entire page with HTML/CSS only?如何仅使用 HTML/CSS 从整个页面中删除 :target 伪类？
【发布时间】：2019-07-13 00:46:22
【问题描述】：

我有一个任务，我在屏幕左侧的菜单上有一个项目列表。单击菜单项时，它们应该仅使用 CSS/HTML 移动到菜单之外。

我能够使用 :target 伪类和 href 标记的组合来实现这一点。但后来我意识到我无法回到原来的菜单，因为菜单项始终是有针对性的并保留在菜单之外。

起初，我以为在目标 div 中再次单击会删除伪类，但显然，它什么也没做。

我相信将菜单恢复到其原始格式的最佳方法是取消定位当前项目而不单击另一个。

这是 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 sn-ps，但要求明确规定我只使用 CSS/HTML。

【问题讨论】：

一种方法（但我不太确定您需要什么或您可能有什么其他限制）是将您的 :target 选择器修改为：a:not([href="#"]):target，并使用“重置” ' 链接：<a href="#">Reset</a> 重置列表：demo.

标签： html css target

【解决方案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>

【讨论】：