J'essaie d'utiliser jquery et blueprint css pour effectuer une tâche simple (à mon avis), qui est illustrée dans le code ci-dessous. En gros, j'ai une liste d'éléments, et je veux avoir un X à la fin de chaque élément pour que les éléments puissent être supprimés, je voudrais aussi que le X apparaisse seulement si l'utilisateur passe la souris sur les éléments de la liste. Le passage de la souris fonctionne quelque peu, mais lorsque je m'approche du X pour cliquer, il disparaît pour une raison quelconque. Blueprint css est utilisé pour le positionnement. Le code est le suivant, il devrait fonctionner si on le branche dans un fichier html vierge :
<head>
<style type="text/css">
.delete{
display:none;
}
.entry{
list-style:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/63795c8bfe31cbbfad726f714bf8d22770adc7ad/blueprint/screen.css" type="text/css" media="screen, projection">
<script type="text/javascript">
$(function(){
$('.entry').live("mouseover", function(){
$(this).find('.delete').css({'display':'inline'});
}).live('mouseout', function(){
$(this).find('.delete').css({'display':'none'});
});
});
</script>
</head>
<div id="list span-24 last">
<ul>
<li class="entry"><div class="span-22">Something some thing some thing some thing some thing</div><div class="span-2 last"><a class="delete">X</a></div></li>
</ul>
</div>
