Объект, оставляющий значение свойства после нажатия на

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

Я сделал с JQuery.

$(document).ready(function(){
  $('.icons_and_text').click(function(){
    $('.icon').toggleClass("new");
  })
});

  .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;
}

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

<div class="icons_and_text">
   <div class="icon">
       <img src="https://picsum.photos/500/200">
       <p>Responsive <p>Websites</p></p>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 2

div:focus Не будет работать по умолчанию, если у div нет атрибута tabindex.

Атрибут tabindex определяет порядок перехода элемента (когда кнопка «tab»используется для навигации).

С 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;.