CSS: зависание с проблемой JS

Question

У меня есть ссылка, которая становится зеленой с атрибутом CSS a: hover. Когда я нажимаю на ссылку, эта функция срабатывает:

    $("#comment_title_link").toggle(function() {
       $(this).text('Done');
      }, 
     function(){
       $(this).text('Add Comment title');
     });

, который изменяет текст ссылки. Атрибут hover перестает применяться только после того, как вы пересечете границу элемента, к которому он применяется. Однако, поскольку я меняю текст с «Добавить заголовок комментария» на «Готово», если навести указатель мыши на слово «Заголовок» и щелкнуть, слева от моей мыши появится надпись «Готово», поскольку кнопка «Готово» намного короче, чем Добавить комментарий Заголовок. Поэтому атрибут: hover по-прежнему применяется, даже если моя мышь не находится над ссылкой. Как я могу исправить эту проблему?

Answer 1

Один из обходных путей - удалить стили зеленого цвета с помощью скрипта в пределах вашего переключателя (). И когда вы уйдете и вернетесь к этому тексту, он снова станет зеленым.

Самый простой способ - применить эффект наведения с помощью CSS только к определенному классу и удалить этот класс после переключения текста:

//in css:
A.greenLink:hover 
{
  color: green;
}

// script:
$("#comment_title_link").toggle(function() {
   $(this).text('Done')
          .removeClass('greenLink');
  }, 
 function(){
   $(this).text('Add Comment title');
 });

В идеале вы хотели бы выяснить, почему это происходит, и если есть что-то, что вы можете с этим сделать («правильный» путь). Но если это действительно ошибка перерисовки / рендеринга в браузере, то, возможно, этот обходной путь (как бы он ни был) может помочь.

Answer 2

добавьте стиль для: active, отменив: hover (соответствующий нормальному стилю), когда он получит щелчок, он перейдет к: active style.