Question

如果黑盒子在那里，我希望div#first保持蓝色。仅当我点击div#first时才会出现黑匣子。如果我点击其他任何地方，应该隐藏黑盒子，div#first应该是红色的。

我该怎么办？

Answer 1

这看起来像是班级的工作！

触发点击事件后，将一个类添加到与#first具有相同CSS的:hover。

div#first:hover,div#first.hover{
 width:200px;
 height:200px;
 background-color:blue;
}

然后，点击添加课程：

$('#first').click(function() {
  $(this).addClass('hover');
  $('#second').show();
});

当您点击其他地方时，删除课程和黑匣子：

$('body').click(function(e) {
    if(!$(e.target).is('#first')){
        $('#first').removeClass('hover');
        $('#second').hide();
    }
});

DEMO：http://jsfiddle.net/EjKKP/

Answer 2

以下是更新jsFiddle：http://jsfiddle.net/XYbmE/87/

<强> JS

// This will take care of restoring the boxes
// when user clicks outside the boxes
$(document).click(function() {
    $('#first').removeClass('active');
    $('#second').hide();
});

// This will add an "active" class and prevent
// the above code from being triggered when
// the box is clicked.
$('#first').click(function(e) {
    e.stopPropagation();

    $(this).addClass('active');
    $('#second').show();
});

<强> CSS

/* Have #first.active:hover look/behave the same as #first */
div#first:hover, div#first.active {
    width:200px;
    height:200px;
    background-color:blue;
}

Answer 3

此外，对于第二个问题，您需要在document.click上添加一个小脚本来隐藏和删除类。

$('#first').click(function(e) {
 $(this).addClass('hover');
 $('#second').show();

 //stop bubbling
 e.stopPropagation();

});

$(document).click (function (e) {
   if (this.id == 'first') {
      return;
  }
  $('#first').removeClass('hover');
  $('#second').hide();
 });

DEMO 此处

当你的鼠标没有悬停时如何保持悬停，Jquery

3 个答案: