无需使用css悬停的onclick切换以及悬停更改类

Question

I have 3 boxes. Inside each big box(red) there is a small box(black by default but grey on hover).

1. On hover red box the small box color should change (It's changing now so ok).

2. When you click red box the black box should change to grey(which is working) and at the same time when you mouse over other boxes then it should do same as point 1(which is working too). But the problem begins here. When you click the red box the black box changes to grey and when you click again that red box the grey box is not changing to black. So the black box should toggle(black to grey and then grey to black) in every click to red box.

3. I can't use any css :hover effect.

Jquery

$('.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');
});

Is there anything to do with (data clicked true).

Here is the jfiddle -- http://jsfiddle.net/squidraj/PTZE9/5/

Answer 1

Remove extra ' ' from $('this')

Use

$(this).find('.imagebg').removeClass("clicked").toggleClass('active');

instead

$('this').find('.imagebg').removeClass("clicked").toggleClass('active');

Demo