Javascript 悬停并单击函数/Jquery

几个小时前我发布了一个问题，但我的例子并不完美

就这样

我有两个大箱子。在悬停每个大红色框时，小黑色框应更改其背景颜色。当您单击每个大框时，小框颜色也应更改。在鼠标输入和输出时，它工作正常。但onclick不起作用。我试过绑定/解除绑定，但没有成功

Jquery：

$('.libg').click(function () {
    $('.imagebg').removeClass('active');
    $(this).find('.imagebg').addClass('active');
}).hover(
function () {
    $(this).find('.imagebg').addClass('active');
},
function () {
    $(this).find('.imagebg').removeClass('active');
});

JSFIDLE是

---

请给我一些建议。谢谢。

我会分别勾选每个框。因此，我将修改您的html代码以及一些jquery代码

Html代码：

<ul>
  <li class="libg1" id="1">
    <div class="imagebg1" id="1a"></div>
  </li>
  <li class="libg2" id="2">
    <div class="imagebg2" id="2a"></div>
  </li>
</ul>

第一个矩形悬停代码：

$('.libg1').hover(function () {
  if($(this).data('clicked')) {
    //check if active class exists
    if($('.active').size()){
      $('#1a').removeClass('active');
    }
    else{
      $('#1a').addClass('active');
    }
  }
  else{
    $('#1a').addClass('active');
  }
},function () {
    if($(this).data('clicked')) {
      $('#1a').addClass('active');
    }
    else{
      $('#1a').removeClass('active');
    }
});

第二个矩形Hoving代码：

$('.libg2').hover(function () {
   if($(this).data('clicked')) {
     //check if active class exists
     if($('.active').size()){
       $('#2a').removeClass('active');
     }
     else{
       $('#2a').addClass('active');
     }
   }
   else{
     $('#2a').addClass('active');
   }
},function () {
   if($(this).data('clicked')) {
     $('#2a').addClass('active');
   }
   else{
     $('#2a').removeClass('active');
   }
});

---

您有两行相互冲突的代码：

$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');

第一行将删除该类，第二行将该类添加回元素

---

反对票！！！。。但没想到，“当你点击每个小盒子时，盒子的颜色也应该改变。”==>哪个盒子的颜色应该改变？大的还是小的？@NKD…小的。对不起，我编辑了我的问题。单击每个大框后，小框的颜色也应该改变。好的，您的代码正在执行一个循环添加/删除类。你的点击实际上是有效的，但因为你是用鼠标悬停绑定的，所以它会将其反转回来。解决方法是检查是否“点击”了较大的框。因此，在click（）函数中，您可以检查以前是否使用类似$（this.data（'clicked'，true）的内容单击过较大的框；然后在hover（）函数中添加一个if语句，根据是否单击过来执行add/remove类。你必须给我更多关于要求的信息，这样我才能帮助你。关闭…一个东西，即当你点击一个框时，它需要从所有框中删除类活动，然后为点击的框放置类“活动”。让我试试。是的，因为一次只有一个小框可以有一个类活动。你看到你漏掉的所有信息了吗问题是什么？我们不可能帮助你处理这么多丢失的信息。

$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');

$('.libg').click(function () {
    var current = $(this).find('.imagebg');
    var all = $('.imagebg');
    var index = all.index(current);

    $('.imagebg').each(function(i) {
        if(i != index) {
            $(all[i]).removeClass('active');
        }
    });

    if(current.hasClass('active')) {
        current.removeClass('active');
    } else {
        current.addClass('active');
    }
}).hover(
function () {
    $(this).find('.imagebg').addClass('active');
},
function () {
    $(this).find('.imagebg').removeClass('active');
});