html - 对象被点击后留下属性值

Question

我目前正在练习 HTML 和 CSS 并从 PSD 模板制作网页，到目前为止一切顺利，但我面临以下问题:

问题是单击后边框消失，:focus 似乎无法处理该问题。我需要在单击另一个元素之前显示边框，可以使用 CSS 完成吗？如果是(这可能就是答案)，那么如何？如果它有 JS 解决方案，如果你能帮助我，我会很高兴。

.icons_and_text {
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: 27px;
  font-family: Segoe WPN;
  color: #727171;
}

.icon {
  padding: 26px 52px 52px 52px;
  z-index: 2
}

.icon:hover {
  cursor: pointer;
}

.icon:active {
  border: 3px solid #dedede;
  border-bottom: white;
}

.icon:focus {
  border: 3px solid #dedede;
  border-bottom: white;
}

<div class="icons_and_text">
  <div class="icon">
    <img src="Images/phone_img.png">
    <p>Responsive</p>
      <p>Websites</p>     
  </div>
</div>

Answer 1

div:focus 默认情况下不起作用，除非 div 具有 tabindex 属性。

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

来自 W3Schools .

它还为元素启用焦点功能，因此如果您希望您的 div 具有焦点功能，只需添加此属性:tabindex="0"。

.icons_and_text {
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: 27px;
  font-family: Segoe WPN;
  color: #727171;
}

.icon {
  padding: 26px 52px 52px 52px;
  z-index: 2
}

.icon:hover {
  cursor: pointer;
}

.icon:active {
  border: 3px solid #dedede;
  border-bottom: white;
}

.icon:focus {
  border: 3px solid #dedede;
  border-bottom: white;
}

<div class="icons_and_text">
  <div class="icon" tabindex="0">
    <img src="https://via.placeholder.com/150">
    <p>Responsive
      <p>Websites</p>
    </p>
  </div>
</div>

它还会在聚焦时添加轮廓，您可以使用 outline: 0; 禁用它。