javascript - CSS :hover with JS problem

Question

我有一个通过 a:hover CSS 属性变为绿色的链接。当我点击链接时，这个函数被触发:

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

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

Answer 1

一种解决方法是通过您的 toggle() 中的脚本删除绿色样式。当您离开并返回将鼠标悬停在该文本上时，它应该再次变为绿色。

最简单的方法是通过 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');
 });

理想情况下，您想弄清楚为什么会发生这种情况，以及您是否可以采取任何措施(“正确”方式)。但是，如果这确实是一个浏览器重绘/渲染错误，那么这个解决方法(虽然丑陋)可能会有所帮助。