User:Eleanorg/1.2/Forbidden Pixels/first steps with jQuery CSS manipulation: Difference between revisions
(Created page with "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()... ...") |
No edit summary |
||
| Line 2: | Line 2: | ||
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()... | 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=" | <source lang="html4strict"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Latest revision as of 21:54, 20 February 2012
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>