CSS :hover with JS problem

Question

I have a link that is turned green with the a:hover CSS attribute. When I click the link, this function is triggered:

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

which changes the text of the link. The hover attribute seems to only stop being applied once you cross the border of the element that it's being applied to. However, since I change the text from "Add Comment Title" to "Done", if I have my mouse over on the word "Title" and click, "Done" appears to the left of my mouse since Done is so much shorter than Add Comment Title. Therefore, the :hover attribute is still being applied even when my mouse is not over the link. How can I remedy this issue?

Answer 1

One workaround would be to remove the green color styling via script within your toggle(). And when you leave and come back to hover over that text, it should turn green again.

Easiest way would be to apply hover effect via CSS only on a certain class, and remove that class after switching text:

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

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

Ideally, you'd want to figure out why it's happening and if there's anything you can do about it (the "right" way). But if this indeed is a browser redrawing/rendering bug, then perhaps this workaround (as ugly as it is) might help.

Answer 2

为：active添加一种样式：单击该按钮时撤消：hover（与常规样式匹配），它将转到：active样式。