Javascript CSS显示属性不工作

我有一个div。最初，一个数字显示在该div上。当我悬停该div时，该数字隐藏，并显示一个段落。当我悬停在外时，段落隐藏，数字再次显示

我已经尝试使用css（display:none和display:block）和jquery（show（）和hide（））来实现这一点。两者都有效，但并不总是如此。有时，数字和段落都会消失，我必须刷新页面才能将它们恢复。与其他浏览器相比，它在Chrome上工作得更好，但即使在Chrome上，它也不总是工作

该页面处于联机状态，因此您可以自己尝试

代码如下所示：

div h2 {
   display: block;
}

div:hover h2 {
   display: none;
}

div p {
    display: none;
}

div:hover p {
    display: block;
}

有人知道我如何解决这个问题吗？

简单程序：

<div id="testDiv">
    <p class="num">1</p>
    <p class="para" class="invisible">Lorem Ipsum</p>
</div>

<style>
  .invisible {
    display: none;
  }
</style>

<script>
 $(function() {
    $('#testDiv').on('mouseover', function() {
      if($(this).find(".para").hasClass("invisible")) {
          $(this).find(".para").removeClass("invisible");
          $(this).find(".num").addClass("invisible");
      }
      else {
          $(this).find(".para").addClass("invisible");
          $(this).find(".num").removeClass("invisible");
      }
    });
  });
</script>

1
Lorem Ipsum

.无形的{
显示：无；
}
$（函数（）{
$（'#testDiv'）。on（'mouseover'，function（）{
if（$（this）.find（“.para”）.hasClass（“不可见”））{
$（this.find（“.para”）.removeClass（“不可见”）；
$（this.find（“.num”）.addClass（“不可见”）；
}
否则{
$（this.find（“.para”）.addClass（“不可见”）；
$（this.find（“.num”）.removeClass（“不可见”）；
}
});
});

尝试为.temp*、h2和p定义z索引。我看不出有任何其他理由说明它不起作用。它在Firefox和Chrome中都适用于我。谢谢@MelanciaUK。我添加了一些代码，@RadekPech仍然无法工作。在某些浏览器中，它在大多数情况下完全消失……JS在这里不好，因为它可能无法执行，CSS解决方案要好得多。^为什么它无法执行？o、 o“…它可能无法在您认为应该的时间执行。”因为浏览器不需要在特定时间执行JS代码，并且可能会推迟执行，这可能会导致意外的结果。如果您阅读jQuery文档（），您会发现mouseover事件不太擅长精确地告诉用户正在做什么。无论如何，您的代码并没有达到预期的效果。如果你看一下Gonçalo的页面，已经有比你更好的JS代码了（参见main.JS第120行）。这只是一个简单的解释，可以得到他想要的@RadekPech