<?php include '../config.php' ?>
<!DOCTYPE html>
<html lang="en">
	<meta charset="utf-8">
	<title>Hover effect</title>

	<?php include DOCROOT.'header.php' ?>
	<style type="text/css">
			border-collapse: collapse;
			cursor: default;
			margin: auto;
		th, td
			border: 1px solid #ccc;
			padding: .2em .7em;
			background-color: #fd8;

	<script type="text/javascript">
		var colors =
					normal: '#eee',
					hover: '#ec7',
					normal: 'transparent',
					hover: '#fd8',

		function hoverHandler(event)
			var color = $(this).is(':nth-child(odd)') ? colors.odd : colors.even;

				case 'mouseenter':
						// Stop animation where it is
						// Start fading up
						.animate({backgroundColor: color.hover }, 'fast');

				case 'mouseleave':
						// Jump to end of animation
						.stop(true, true)
						// Start fading down
						.animate({backgroundColor: color.normal }, 'slow');

			// Make odd rows colored
			$('tr:nth-child(odd)', 'table tbody').css({backgroundColor: colors.odd.normal});

			// Attach handler
			$('table tbody').delegate('tr', 'hover', hoverHandler);



	<h1>Hover effect</h1>

	<p><a href=".">Plain</a> | <a href="alt.php">Alternate</a></p>

		<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>

	<?php $article = 1165; include DOCROOT.'footer.php'; ?>