javascript - Onclick 切换以及悬停更改类而不使用 css hover

Question

我有3个盒子。每个大盒子（红色）内都有一个小盒子（默认为黑色，悬停时为灰色）。

1. 在悬停红色框上，小框颜色应该会改变（现在它正在改变，所以可以）。

2. 当您单击红色框时，黑框应变为灰色（正在工作），同时当您将鼠标悬停在其他框上时，它应该与第 1 点相同（也正在工作）。但问题从这里开始。当您单击红色框时，黑色框会变为灰色，当您再次单击该红色框时，灰色框不会变为黑色。所以黑框应该在每次点击红色框时切换（黑色到灰色，然后灰色到黑色）。

3. 我不能使用任何 css :hover 效果。

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

有什么关系（数据点击为真）。

这是 jfiddle—— http://jsfiddle.net/squidraj/PTZE9/5/

Answer 1

从$('this')

利用

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

反而

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

演示