Блог

Главная - Вопросы по программированию - :фокус не будет сохранять фокус, действует как: активный

:фокус не будет сохранять фокус, действует как: активный

#html #css

#HTML #css

Вопрос:

итак, я создал кнопку, которая имеет простую всплывающую подсказку:focus :after, дело в том, что она действует как псевдо-элемент :active (он не останется видимым после нажатия на него).

GIF

Вот мой код SCSS

 .copy {
  height: 40px;
  width: 35px;
  right: 25px;
  display: flex;
  position: absolute;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.4;
  transition: 0.3s;
  amp;:hover {
    opacity: 0.8;
  }
  amp;:after {
    content: 'Copied!';
    display: none;
    position: absolute;
    z-index: 2;
    top: -24px;
    left: -7px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    opacity: 0.8;
  }
  amp;:focus:after {
      display: block;
  }
  amp; svg{
    height: 40px;
    fill: var(--svg_reload);
  }
}

Я упускаю что-то очевидное? Спасибо

Редактировать:

Через некоторое время, пытаясь понять, почему это не работает, я отказался от попыток решить эту проблему. Вместо этого я пришел, чтобы создать функцию JavaScript, которая создает промежуток над нажатой кнопкой.

 function tooltip(button){
    var tooltip_exists = document.querySelector(".copy_tooltip")
    if(typeof(tooltip_exists) != 'undefined' amp;amp; tooltip_exists != null){
        tooltip_exists.remove();
    }
    button.innerHTML  = '<span class="copy_tooltip">Copied!<span>';
}

Используя свойство onclick=»tooltip(this);» HTML, функция проверяет, существует ли уже диапазон, если он существует, он удаляет его, а если нет, то создает его.

GIF 2

Комментарии:

1. Можете ли вы также поделиться своим HTML?

2. Конечно, вот так <button class="copy" data-clipboard-action="copy" data-clipboard-text="' value['package'] '"><svg><use xlink:href="style/svg/copy.svg#copy_svg"></use></svg></button> (это добавление)

3. Я имел в виду, можете ли вы включить это в вопрос. Это позволит людям легче помочь вам.

4. Я думаю, вам может понадобиться :visited , если вы хотите, чтобы стиль css сохранялся после того, как фокус покинул элемент. В противном случае, с :focus помощью, он будет сохранять сфокусированный стиль css только тогда, когда элемент активно находится в фокусе…