Javascript 将鼠标悬停在元素上会更改元素，该元素随后包含在鼠标悬停中

请原谅标题的措辞，但这有点难以总结

这就是我想做的

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

现在是进退两难的局面。当鼠标悬停在example1或example2上时，我需要example1和example2保持可见，这是不可能的，因为当鼠标离开测试转到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>

我会解决这个问题，但我不能这样做，因为在我的实际代码中，测试已经在一个包装器下了，一个与之相关的非常特定的设计的包装器，如果我在其中包含示例1和示例2，它将被销毁

---

综上所述，我的问题是：当测试悬停在example1和example2上时，即使让测试悬停在example1和example2上，我如何保持example1和example2可见？

这不起作用

$('#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>

---

使用mousenter和mouseleave怎么样

编辑。。。 您可以包含这些元素

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

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

---

正如我上面所说的，我已经在代码中的不同包装中进行了测试，它是高度特定的，所以示例1和示例2会破坏它。在重做我的全部代码之前，我正在试着看看是否有任何方法可以在jQuery或JavaScript中完成。@Odyssey我已经添加了解决方案的另一半。这让我想到了位置：绝对值和边距顶部，就像我需要的一样！mouseenter和mouseleave本质上是.hover在jQuery中，这仍然让我回到我最初的困境，即由于预先存在的代码，无法将测试、示例1和示例2打包在一起。

<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>

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

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