remy
remy

Reputation: 1305

jquery: how to hide and show

I want to hide and show a <p> tag when mouse over it, but my code only can hide the p tag and never show it again ,why?

<html>
  <head>
<script type="text/javascript" src="jquery.js"></script>
<script>
  $(function(){
    $("#mouse").mouseover(function(){
      if($(this).is(':hidden')){
        $(this).show("normal");
      }
      else{
       $(this).hide("slow"); 
      }
    });
  });
</script>
  </head>
  <body bgcolor="white">
   <p id="mouse">
     test
   </p>
 </body>
</html>

Upvotes: 0

Views: 147

Answers (2)

Azadious
Azadious

Reputation: 172

When element is hidden you can't use any event with it. It would be better if you don't hide "p" but hide only element in "p".

Example

<script>
$(document).ready(function() {
  $(".hidden").hover(function () {
     $(".hidden span").toggle();
  });
});
</script>

<p class='hidden'>please hover<span> Hide this text </span></p>

Upvotes: 1

Elzo Valugi
Elzo Valugi

Reputation: 27876

Because you will not have a mouseover event on a hidden p.

Upvotes: 4

Related Questions