CSS：悬停与 JS 问题答案

【问题标题】：CSS :hover with JS problemCSS：悬停与 JS 问题
【发布时间】：2011-04-07 11:58:11
【问题描述】：

我有一个带有 a:hover CSS 属性的绿色链接。当我点击链接时，会触发这个功能：

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

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

【问题讨论】：

所有浏览器都会出现这种情况吗？这似乎是浏览器中的 DOM 重绘错误。
不在 Firefox 中，但在 chrome 和 safari 中
我帮不上什么忙，但听起来像 webkit 错误。点击后，您可以尝试在链接上调用 blur()。

标签： javascript jquery css hover styling

【解决方案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');
 });

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

【讨论】：

【解决方案2】：

为 :active 添加样式以撤消 :hover （与正常样式匹配），当它被点击时，它将转到 :active 样式。

【讨论】：

:focus 怎么样？我以前也遇到过类似的问题。