Tuto Calendrier hover et click

Bonjour,

Après avoir suivis le tuto calendrier, je souhaiterais savoir comment est-il possible de faire afin que les "events" en mode hover puissent, lors d'un click sur le jour de l'"events", rester affichés pendant un certain délais (H.S. afin de pouvoir mettre un lien sur chaques events).
Aussi afin d'éviter que les utilisateur soit obligé d'attendre la fin de se délais, leur permettre lors d'un autre click n'importe où sur la page arrété cet affichage définit ci-dessus (pour revenir en mode affichage par hover initial).

J'ai testé avec des fonctions comme celle-ci, mais rien y fait:

[code]
<script type="text/javascript">
$(document).ready(function(){
$(td).click(function () {
$('.events').live("click", function() {
.show() .delay(5000);
});
});
$(body).click(function () {
$('.events').die("click");
});
});
</script>
[/code]

Partie du HTML concerné:
[code]
<td <?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>>
<div class="relative">
<div class="day"><?php echo $d; ?></div>
</div>
<div class="daytitle">
<span class="programme">Programme du </span><?php echo $date->days[$w-1]; ?><?php echo $d; ?> <?php echo $date->months[$m-1]; ?>
</div>
<ul class="events">
<div class="poleevent">
<?php if(isset($events[$time]))
{
?>
<div class="star1"><?php echo '<img src="images/star1.png" />';?></div>
<?php
foreach($events[$time] as $e)
{
?>
<li><?php echo $e; ?> :</li>
<?php
}
}
?>
</div>
<div class="titrevent">
<?php if(isset($eventsb[$time]))
{
foreach($eventsb[$time] as $eb)
{
?>
<li><?php echo $eb; ?></li>
<?php
}
}
?>
</div>
</ul>
</td>
[/code]

Partie du CSS concerné:
[code]
table{ border-collapse:collapse;}
table td{ border:1px solid #A3A3A3; width:40px; height:40px;}
table td.today{ border:2px solid #D90000; width:40px; height:40px;}
table td.padding{ border:none;}
table td:hover{ background:#DFDFDF; cursor:pointer;}

table th{ font-weight:normal; color:#A8A8A8;}

table td .day{ position:absolute; color:#8C8C8C; bottom:-20px; right:5px; font-weight:bold; font-size:20px;}

table td .events{ position:relative; width:72px; height:0px; margin:-20px 0px 0px; padding:0px;}
table td .events li{ width:1px; height:1px; float:left; background:#fff; /+border-radius:4px;/ -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px; border-radius:4px 4px 4px 4px; margin-left:0px; overflow:hidden; text-indent:-3000px; }
table td:hover .events{ position:absolute; left:568px; top:0px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;}
table td:hover .star1{ display:none;}
table td:hover .events .poleevent li{ height:30px; line-height:30px; border-bottom:1px solid #D6D6D6; padding-left:6px; text-indent:0; background:none; width:588px;}
table td:hover .events .titrevent li{ height:31px; line-height:31px; padding-left:21px; text-indent:0; background:none;width:490px; }

table td .daytitle{ display:none;}

table td:hover .daytitle{ position:absolute; left:546px; top:-36px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:20px; display:block; font-weight:bold;}
.clear{ clear:both;}

[/code]

Merci pour vos réponses