User:Eleanorg/1.2/Forbidden Pixels/first steps with jQuery CSS manipulation
I'm learning jQuery!
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()...
<!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>