CSS显示属性不起作用

Question

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

我尝试使用 css（显示：无和显示：块）和 jquery（显示（）和隐藏（））来实现这一点。两者都有效，但并非总是如此。有时，数字和段落都会消失，我必须刷新页面才能将它们恢复。它在 Chrome 上的效果比其他浏览器更好，但即使在 Chrome 中也并不总是有效。

页面在线here，大家可以自己试试。

代码如下所示：

div h2 {
   display: block;
}

div:hover h2 {
   display: none;
}

div p {
    display: none;
}

div:hover p {
    display: block;
}

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

Answer 1

简单程序：

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