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和{{1即使离开#example2将鼠标悬停在#test和#example1上也可见？

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

如何使用mouseover和mouseleave ???

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

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

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

将鼠标悬停在元素更改元素上，然后将其包含在鼠标悬停上方

2 个答案: