Salve a tutti,
avrei bisogno di un bell'aiuto... io mi sto

Io ho un'immagine di partenza dove per ogni angolo ci sono delle icone ( una che fa il resize, una il drop, una la cancellazione ecc ) dell'immagine sottostante.
Il mio problema però, è che se vado con il cursore sopra l'icona delete, mi viene visibile il cursore per il resize e si attiva la suddetta funzione. Come posso fare ad inibirla?

questo è il codice:

codice:
<html>
<head>


        
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>


         <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>

        

   <script>
      window.zindex = 30;
      
      newangle = 0;
      
      $(document).ready(function() {
		  $(".resize").resizable({handles: 'ne, se, sw, nw'});
          $(".resize").parent().draggable({
              stack: "div"
          });

        
        $(".ui-resizable-sw").click(function(){
            var $target = $(event.target);
            var name = $target.parent(this).find('img');
            
            var id = ($(name).attr("id"));
            
            var elemento = "#"+id;
            $(elemento).remove();

        });
            
                       
          
      });
      

      
   </script>
   
  <style type='text/css'>  
  
   .resize
   {
      position:absolute;
      border-color:black;
      border-style:solid;
      border-width:1px;
   }
   
   
    .ui-resizable-sw,
    .ui-resizable-nw,
    .ui-resizable-ne,
    .ui-resizable-se
    {
        width: 27px;
        height: 27px;
        background-repeat : no-repeat;
        background-image : none;
        background-position : 0 0;
    }
    
    .ui-resizable-sw:hover
    {
        background-image: url(delete.png);
    }
    
    .ui-resizable-nw:hover
    {
        background-image: url(move.png);
    }
    
    .ui-resizable-se:hover
    {
        background-image: url(rotate.png);
    }

    .ui-resizable-ne:hover
    {
        background-image: url(resize.png);
    }
   
   
    .ui-resizable-sw
    {
        bottom : 0;
        left : 0;
    }
   
    .ui-resizable-nw
    {
        top : 0;
        left : 0;
    }
    
    .ui-resizable-ne
    {
        top : 0;
        right : 0;
    }
    
    .ui-resizable-se
    {
        bottom : 0;
        right : 0;
    }

</style>

   
</head>

<body>

      <div >
          [img]prova.jpg[/img]
      </div>

   
</body>
</html>