Fascia su immagine

[xares]

Buonasera

in una pagina ho dei div con dentro solo una immagine.



Mi servirebbe, al passaggio del mouse, far apparire in basso una fascia contenente una icona (nel caso specifico il cestino) in modo da gestire poi l'evento click sull'immagine come richiesta di cancellazione.



il codice di ogni div è molto semplice

<div>
    <img src="#" alt="#" />
</div>

Mi aiutate?
Suggerimenti?

[hidran]

Lo puoi fare dinamicamente con javascript:

1) aggiungi un listener al div che avvolge tutti le immagini con l'evento onmouseover
2) Nella funzione di callback del listener, verifica che l'elemento che ha scatenato il mouseover sia l'immagine principale( verifica
che abbia una class css che hai dato solo a quelle immgini)
3) Crei al volo un div con all'interno l'immagine del cestino, lo posizioni assolutamente rispetto all'immagine che
ha scatenato il mouse over
4) aggiungi l'evento click al cestino e la funzione che gestirà il click del cestino le passi l'identificativo dell'immagine:

Un pezzo del javascript:

var my mainDiv = document.getElementById('divid');
  mainDiv.addEventListener('mouseover', function(ele){
     var target = ele.target;
     if(target.className =='lamiaclasse'){
    // chiami la funzione che esegue tutta la logica di mostrare div con cestino
}
   
});