Question

当悬停红色框时，灰色框将显示。如果鼠标停留在灰色框上，则灰色框保持打开状态。当鼠标从灰色框移回红色框时，我想让灰色框仍然打开。

只有当鼠标悬停在红色或灰色框上时，灰色框才会关闭。

唯一的问题是，当我将鼠标从灰色框移回红色框时，我无法显示灰色。

有人可以帮忙吗？请不要改变结构，我明白box1包装的box2更容易，

<div id="box1">
    <div id="box2"></div>
</div>

但这不是我想要尝试的。感谢

Answer 1

尝试使用css

＆＃13;

#box1 {
    width: 40px;
    height: 40px;
    background: red;
    cursor:pointer;
}

#box2 {
    display:none;
    width: 400px;
    height: 400px;
    background: grey;
}

#box1:hover + #box2, #box2:hover {
    display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="box1"></div>
<div id="box2"></div>

＆＃13;

jsfiddle http://jsfiddle.net/0sLhL0xf/3/

Answer 2

我认为你可以使用

var timeout;
var $box1 = $('#box1');
var $box2 = $('#box2');

$box1.hover(function() {
  clearTimeout(timeout);
  $box2.show();
}, function() {
  timeout = setTimeout(function() {
    $box2.hide();
  }, 1000);
});

$box2.hover(function() {
  clearTimeout(timeout);
}, function() {
  timeout = setTimeout(function() {
    $box2.hide();
  }, 1000);
});

#box1 {
  width: 40px;
  height: 40px;
  background: red;
  cursor: pointer;
}
#box2 {
  display: none;
  width: 400px;
  height: 400px;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box1"></div>
<div id="box2"></div>

Answer 3

这是使用mouseenter＆amp;的另一种解决方案mouseleave。

http://jsfiddle.net/0sLhL0xf/2/

＆＃13;

var $boxes = $('.boxes');
var $box1 = $('#box1');
var $box2 = $('#box2');

$boxes.mouseenter(function() {
    $box2.show();
});
$boxes.mouseleave(function() {
    $box2.hide();
});

＆＃13;

#box1 {
    width: 40px;
    height: 40px;
    background: red;
    cursor:pointer;
}

#box2 {
    display:none;
    width: 400px;
    height: 400px;
    background: grey;
}

＆＃13;

<div class="boxes" id="box1"></div>
<div class="boxes" id="box2"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

jQuery悬停，onhover显示另一个元素并将鼠标移回

3 个答案: