I have designed a grid of 16x16 boxes. When you hover your mouse over a box, it turns pink. However, I want the box to remain visible when you move away from it, with the pink color gradually fading back to the original gray after a second.
Here is the HTML code:
<head>
<title>SketchPad</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<h1> SketchPad </h1>
<div id="container">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.js"></script>
</body>
</html>
And here is the CSS code:
h1 {
text-align: center;
color: black;
}
tr, td, table {
border-style: solid;
border-width: 1px;
background-color: gray;
margin: auto;
height: 25px;
width: 525px;
}
Finally, the JavaScript code:
var rows=16;
var cols=16;
document.write("<table>");
for (i=0; i<rows; i++) {
document.write("<tr>");
for (j=0; j<cols; j++) {
document.write("<td>"+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
$( "td").css("color", "red");
$("td").hover(function() {
$(this).css("background-color", "pink");
}, function () {
$(this).fadeOut("slow", function(){
});
});