将鼠标悬停在元素更改元素上，然后将鼠标悬停在

Question

以上

请原谅标题的措辞，但总结起来很难。

这就是我想要做的

<div id="test">Test</div> 
<div id="example1" style="display:none;">Test</div> 
<div id="example2" style="display:none;">Test</div> 

当#test悬停，它会导致#example1和#exmaple2徘徊中止，#example1和#exmaple2再次返回到无形之中时变得可见，然后。

明显的简单代码。

$('#test').hover(
    function() { 
    $('#example1,#example2').show(); 
    }, 
    function() { 
    $('#example1,#example2').hide(); 
    } 
); 

现在，这里的困境。我需要#example1和#exmaple2在鼠标悬停时保持可见状态，这是不可能的，因为当鼠标离开#test时，鼠标悬停在#example1或#example2上，它们会回到隐形状态，正如上面的代码所指示的那样。我怎样才能使这成为可能？

我明白包装的元素这样在一起

<div id="wrapper"> 
<div id="test">Test</div> 
<div id="example1" style="display:none;">Test</div> 
<div id="example2" style="display:none;">Test</div> 
</div> 

和更改代码

$('#wrapper').hover(
    function() { 
    $('#example1,#example2').show(); 
    }, 
    function() { 
    $('#example1,#example2').hide(); 
    } 
); 

可以解决这个问题，但我不能这样做，因为在我的实际代码， #test已经在包装下了，这是一个包装，它具有与之相关的非常具体的设计，如果我在其中包含#example1和#example2，它将被销毁。

综上所述上面，我的问题是：当#test悬停和#example1和#example2变得可见，我怎能#example1和#example2可见离开#test即使悬停在#example1和#example2？

Answer 1

这不行吗？

$('#test').hover(
    function() { 
    $('#example1,#example2').show(); 
    } 
    , function() { 
    $('#example1,#example2').hide(); 
    } 
); 

然后改变你的html到这样的东西来解决高度问题。

<div id="test"> 
Test 
<div id="example1" style="display:none;z-index:256;">Test</div> 
<div id="example2" style="display:none;z-index:256;">Test</div> 
</div> 

Answer 2

如何使用mousenter和mouseleave？

编辑... 可以包含的元素

$('#test,#example1,#example2').hover(

function() { 
    $('#example1,#example2').show(); 
}, function() { 
    $('#example1,#example2').hide(); 
});