Question

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

我试图用css（display：none和display：block）和jquery（show（）和hide（））来实现这个目的。两者都有效，但并非总是如此。有时，数字和段落都会消失，我必须刷新页面才能恢复它们。它在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>

CSS显示属性不起作用

1 个答案: