hover-effect/index.php
<?php include '../config.php' ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hover effect</title>
<?php include DOCROOT.'header.php' ?>
<style type="text/css">
table
{
border-collapse: collapse;
cursor: default;
margin: auto;
}
th, td
{
border: 1px solid #ccc;
padding: .2em .7em;
}
</style>
<script type="text/javascript">
function hoverHandler(event)
{
switch(event.type)
{
case 'mouseenter':
$(this)
// Stop animation where it is
.stop(true)
// Start fading up
.animate({backgroundColor:'#fd8'}, 'fast');
break;
case 'mouseleave':
$(this)
// Jump to end of animation
.stop(true, true)
// Start fading down
.animate({backgroundColor:'transparent'}, 'slow');
break;
}
}
$(function()
{
$('table').delegate('tbody tr', 'hover', hoverHandler);
});
</script>
</head>
<body>
<h1>Hover effect</h1>
<p><a href=".">Plain</a> | <a href="alt.php">Alternate</a></p>
<table>
<tr><th>01</th><td>Pellentesque eleifend sem sed metus porta in ultricies elit pulvinar.</td></tr>
<tr><th>02</th><td>Pellentesque adipiscing ante dictum nibh sodales et cursus sem laoreet.</td></tr>
<tr><th>03</th><td>Curabitur eleifend neque non velit tempor sed vulputate tortor sollicitudin.</td></tr>
<tr><th>04</th><td>Nullam et ante ipsum, a pretium lectus.</td></tr>
<tr><th>05</th><td>Aenean mollis tellus sit amet dui vestibulum non elementum nisi volutpat.</td></tr>
<tr><th>06</th><td>Morbi ut dolor nisi, a cursus purus.</td></tr>
<tr><th>07</th><td>Fusce ut nibh at ante tincidunt venenatis.</td></tr>
<tr><th>08</th><td>Maecenas ac sapien orci, vel mollis turpis.</td></tr>
<tr><th>09</th><td>Sed ut enim augue, vitae laoreet magna.</td></tr>
<tr><th>10</th><td>Vestibulum vel neque purus, in lacinia ligula.</td></tr>
<tr><th>11</th><td>Integer cursus leo accumsan arcu vehicula semper.</td></tr>
<tr><th>12</th><td>Duis non dui ac turpis egestas semper.</td></tr>
<tr><th>13</th><td>In vitae justo at leo elementum lobortis.</td></tr>
<tr><th>14</th><td>In bibendum aliquet augue, eu tempor velit lacinia a.</td></tr>
<tr><th>15</th><td>Praesent et mauris quis dui interdum sollicitudin in vel erat.</td></tr>
</table>
<?php $article = 1165; include DOCROOT.'footer.php'; ?>
</body>
</html>