CSS 표시 속성이 작동하지 않습니다.

Question

div가 있습니다. 처음에는 해당 div 위에 숫자가 표시됩니다. div를 가리키면 숫자가 숨기고 단락이 표시됩니다. 마우스를 가져 가면 단락이 숨겨지고 숫자가 다시 표시됩니다.

저는 CSS (display : none 및 display : 블록) 및 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>