HTML要素に最後にホバリングした状態を保存するにはどうすればよいですか？

Question

私は動的に円を生成するためのWordpressショートコードに取り組んでいます。 現在のバージョンでは、現在の状態と最後のホバー状態の保存に問題があります。ここで

は、私が、円の下にテキストを表示する問題を抱えているfiddle

です。最後にホバリングされたサークルから新しいテキストを表示するまでテキストを表示する必要があります。

おそらく私の問題の良い解決策はありますか？

私の問題はホバーエンドにあると思います。

[...] ,function() { 
     $contentBoxPrevious = $contentBoxCurrent; 
     $contentBoxCurrent.removeClass('active-text'); 
     $(this).removeClass('hover active'); 
    } 

Answer 1

移動あなたは「アクティブ・テキスト」を削除したことだった間違って何をしていたこのhttps://jsfiddle.net/eu0jcmh0/

ようhandleIn機能の真ん中にhandleOut機能からこのライン

$contentBoxPrevious.removeClass('active-text'); 

あなたが別の要素をマウスで操作したときに、それを削除するのではなく、その要素からマウスを外すたびに、あなたが助けてくれることを願っています！

Answer 2

あなたのコードあまりにも複雑に見えた...
は、だから、僕はそれを私はあなたが結果としてをしたいと思うものをを達成するための私の方法を書き直しました。 Fiddle作業

$(document).ready(function() { 

    // Set all texts invisible 
    $(".text-content").css({ 
     "opacity": 0 
    }); 

    // Declare previous and active indexes vars 
    var previous_index; 
    var active_index; 

    $(".icon-circle").hover(function() { 

     // On mouseenter, getting this index. 
     active_index = $(this).data("index"); 

     // Show associated text. 
     $(this).parent().find(".text-content").css({ 
      "opacity": 1 
     }); 

     // Hide previous associated text. 
     if (active_index != previous_index) { 
      $("[data-index='" + previous_index + "']").parent().find(".text-content").css({ 
       "opacity": 0 
      }); 
     } 

    }, function() { 
     // On mouseout, just keeping previous index... 
     previous_index = active_index; 
    }); 
}); 

：

ここではコードです。