User:Eleanorg/1.2/Forbidden Pixels/css pop-ups
CSS hover reveals a 'popup' which shows information about the pixel hovered on. jQuery reveals the colour of that pixel (td) at the same time.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.5.2.min.js"></script>
<style type="text/css">
body {
background-color: #333;
}
.pixel {
width: 100px;
height: 100px;
border: 1px solid #ddd;
background-color: #d00;
}
/* pixel class 'hidden' is removed on hover to show bg colour */
.hidden {
background-color: transparent;
}
/* .popup span is hidden by default; appears when its parent td is hovered on */
.popup {
display: none;
}
td:hover span.popup {
position: absolute;
display:block;
z-index:100;
left: 30px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity:0.9;
padding:10px;
background:#F0F0F0 none repeat scroll 0 0;
font-family:serif;
font-size:14px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="pixel hidden"><span class="popup">Some info to see on hover!</span></td>
</table>
<!-- javascript to remove the 'hidden' class from td on hover, revealing bg colour -->
<script>
(function() {
var td = $('td');
$(td).mouseover(function(){
console.log('hello');
$(this).removeClass('hidden');
});
})();
(function() {
var td = $('td');
$(td).mouseout(function(){
console.log('goodbye');
$(this).addClass('hidden');
});
})();
</script>
</body>
</html>