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');
 });

理想情况下，你想要弄清楚它为什么会发生，以及你能做些什么（“正确”的方式）。但如果这确实是浏览器重绘/渲染错误，那么也许这种解决方法（尽管很难看）可能有所帮助。

Answer 2

添加一个样式：主动撤消：悬停（匹配正常样式），当它点击它时将转到：活动样式。

CSS：悬停与JS问题

2 个答案: