Hi all, I'm trying to use jquery and blueprint css to do a (so i thought) simple task, which is illustrated in the code below. Basically, I have a list of items, and I want to have a X at the end of each item so that the items can be deleted, i would also want the X appearing only if the user mouseover the list items. The mouseover part works somewhat, but when i go near the X to click, it disappears for some reason. Blueprint css is used for positing. The code is as follows, it should just work if plugged into a blank html file:
<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>