javascript - cssホバーを使用せずにホバー変更クラスと同様にオンクリックトグル

Question

3箱あります。各大きなボックス (赤) の内側には、小さなボックス (デフォルトでは黒ですが、ホバーすると灰色) があります。

1. 赤いボックスにカーソルを合わせると、小さなボックスの色が変わるはずです（現在変更中なので問題ありません）。

2. 赤いボックスをクリックすると、黒いボックスが灰色に変わります (これは機能しています)。同時に、マウスを他のボックスの上に置くと、ポイント 1 と同じようになります (これも機能しています)。しかし、問題はここから始まります。赤いボックスをクリックすると、黒いボックスが灰色に変わり、その赤いボックスをもう一度クリックすると、灰色のボックスは黒に変わりません。したがって、赤いボックスをクリックするたびに、黒いボックスが (黒から灰色に、次に灰色から黒に) 切り替わる必要があります。

3. css :hover 効果を使用できません。

Jクエリ

$('.libg').click(function () {
    $('this').find('.imagebg').removeClass("clicked").toggleClass('active');
    $(this).find('.imagebg').toggleClass("clicked");
}).hover(

function () {
    if (!$(this).find('.imagebg').hasClass("clicked")) $(this).find('.imagebg').addClass('active');
},

function () {
    if (!$(this).find('.imagebg').hasClass("clicked")) $(this).find('.imagebg').removeClass('active');
});

何か関係がありますか (データは true をクリックしました)。

これがjfiddleです- http://jsfiddle.net/squidraj/PTZE9/5/