Javascript CSS：悬停在JS问题上

我有一个带有：hover CSS属性的绿色链接。单击链接时，会触发此功能：

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

---

这将更改链接的文本。hover属性似乎只有在您越过它所应用到的元素的边界时才会停止应用。但是，由于我将文本从“添加注释标题”更改为“完成”，如果我将鼠标悬停在“标题”上并单击，则“完成”将显示在鼠标左侧，因为“完成”比“添加注释标题”短得多。因此，即使我的鼠标不在链接上方，仍然会应用：hover属性。如何解决此问题？

一种解决方法是通过切换中的脚本删除绿色样式。当您离开并返回该文本时，它应该再次变为绿色

最简单的方法是仅在某个类上通过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');
 });

---

理想情况下，你会想弄清楚为什么会发生这种情况，以及你是否可以用正确的方法来解决它。但是，如果这确实是一个浏览器重画/渲染错误，那么也许这种丑陋的解决方法可能会有所帮助

为：active添加一个样式当：鼠标悬停与普通样式匹配时，单击它将转到：active样式。

所有浏览器中都会出现这种情况吗？这看起来像是浏览器中的DOM重画错误。不是在firefox中，而是在chrome和safariI中，没有太多帮助，但听起来像webkit错误。您可以尝试在单击后调用链接上的模糊。关于：焦点？我曾经遇到过类似的问题，这些问题以前已经解决了。