View source for User:Eleanorg/1.2/Forbidden Pixels/first steps with jQuery CSS manipulation

I'm learning jQuery!<br />
Eventual aim here is to reveal the text of each span when hovered on, in some kind of sexy pop-up. But first things first. Fun with .removeClass()...

<source lang="html 4 strict">
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    
    <style type="text/css">
     .pixel {
        width: 50px;
        height: 50px;
        float: left;
        border: 1px #000 solid;
        padding: none;
        margin: none;
        
      }

      .hide p {
        display: none;
      }
    </style>
    
    <script src="jquery-1.5.2.min.js"></script>
   
  </head>
  
<body>
<div>
  <span class="pixel hide" id="pixel_0.0"> <p>id:002000;color:rgba(219,217,218,1);</p> </span>
  <span class="pixel hide" id="pixel_1.0"><p>id:002000;color:rgba(219,217,218,1);</p></span>
  <span class="pixel hide" id="pixel_2.0"> <p>id:002000;color:rgba(219,217,218,1);</p> </span>
</div>

 <script>
 // remove the class 'hide' from the span when it is clicked on.
    (function() {
      var span = $('span');
      $(span).click(function(){
        $(this).removeClass('hide');          
      });
    })();
     
    </script>
</body>

</html>
</source>