Question

我有一个复杂的场景，

我有2个div如下：

<div id="id1"><div>
<div id="id2" style="display:none"><div>

每当id1上的用户鼠标悬停出现id2时，我都有以下js代码：

$(  "#id1" )
    .mouseenter(function() {

    $( "#id2" ).removeAttr('style');
      $( "#id2").attr("style","float:left;height:20px;width:100%;background-color:#F4F8FB;");
    });

但是当用户离开id1时，如果鼠标在id2上，则id2应该是可见的，但如果鼠标离开id1而没有悬停在id2上，则id2应该消失。

现在我不知道该怎么办？当我使用以下代码时，只要鼠标离开id1 id2就会消失，无论我是否在id2上：

 $(  "#id1" )
    .mouseout(function() {

    $( "#id2" ).removeAttr('style');
      $( "#id2").attr("style","float:left;height:20px;width:100%;background-  color:#F4F8FB;display:none;");
    });

有人可以帮忙吗？它甚至可以这样做吗？（我也尝试使用jfiddle，但他们的服务器似乎已关闭）

Answer 1

你可以这样使用

$("#id1" ).mouseout(function() {
  $("#id2" ).mouseenter(function(){
     $("#id2").attr("style","float:left;height:20px;width:100%;background-color:blue;display:block");
});

$( "#id2" ).removeAttr('style');
  $( "#id2").attr("style","float:left;height:20px;width:100%;background-color:#F4F8FB;display:none;");
});

在id1鼠标移开时，您使用mouseenter上的id2。

这是JSbin

当悬停在div 1上时，取决于它是否在div2上，它应该采取不同的行动

1 个答案: