マウスがクリックされ、要素（javascript、jquery、html、css、sass）からマウスアウトされると、ホバー状態を初期化する

クリックするたびに切り替わるシンプルなリンクがあります。また、「クリックされた」状態のときにリンクに追加されるホバー状態もあります。以下の例を参照してください。

<style>
.added {
&:hover {
background-color: red;
}
}
</style>

<script>
$("a").on("click", function() {

var $link = $(this);

if ( $link.hasClass("added") ) {

$link
.removeClass("added")
.html("Add Me!")

} else {

$link
.addClass("added")
.html("Added");

});
</script>

<a href="#">Add Me!</a>

ここでの課題は、ボタンが欲しいということです ない [追加してください]をクリックするとすぐに赤に変わります（マウスは技術的にはまだリンクの上に置かれているため）。クリックしてオフにしてから戻ると、赤くなります。

CSSやjQueryを使用してこれを行うクリーンな方法はありますか？

回答：

jQueryでこれを実現できます mouseout() 関数。

ここで、マウスアウトのチェックを追加して、 .ready クラス：

  $("a").click(function() {
var link = $(this);
if ( link.hasClass("added") ) {
link.removeClass("added").removeClass("ready").html("Add Me!");
} else {
link.addClass("added").html("Added");
// Check if .ready is applied already
if(!link.hasClass("ready")){
link.mouseout(function(){
link.addClass("ready");
});
}
}
});

SASSを変更して、 .ready：

  .added.ready{
&:hover {
background-color: red;
}
}

このフィドルで動作しているのがわかります。 http://jsfiddle.net/easL77fa/