Nascondere 2 div sovrapposti

[bonimba]

Ciao e buonasera a tutti.
Dovrei risolvere un problema con 2 div sovrapposti, ma non riesco a farlo come mi serve.
Ho un'immagine di sfondo con al centro un div che crea una fascia semitrasparente con opacity:0,4 che copre l'intera larghezza dell'immagine con width:100% e un'altezza di 300px
Sopra a questo div ce n'� un altro sempre con una larghezza width:100% con un logo in png e del testo per tutta la larghezza del div con opacity:1, in questo caso per� l'altezza � di 250px
Ora io vorrei che al passaggio del mouse su questi 2 div, venisse nascosto il primo div, quello con la fascia semitrasparente permettendomi di vedere lo sfondo ma lasciando inalterato logo e testi contenuti nel secondo div.
Ora quando passo il mouse, viene nascosta la fascia semitrasparente, per� quando il cursore del mouse arriva a toccare il div contenente logo e testi, visto che � pi� piccolo in altezza, la fascia trasparente riappare.
Ho provato con i livelli, cambiando l'ordine dei div ma niente....o viene nascosto tutto, o il logo passa sotto alla fascia semitrasparente venedo quindi coperto.
Qualcuno mi pu� aiutare a risolvere?
Grazie

Federico

[KillerWorm]

Ciao, prima di cercare soluzioni CSS per quella situazione, sarebbe da capire se si può migliorare l'impostazione che hai dato alla struttura HTML. Cioè, invece di avere 2 div sovrapposti e usare opacity, puoi organizzare tutto in un unico div e rendere trasparente il colore di sfondo del div stesso?

In quel caso la trasparenza per il colore di sfondo la puoi impostare con la funzione rgba(r,g,b,a). Bisogna poi capire il motivo per cui hai impostato delle altezze differenti per quei due div; se ti serve ottenere una fascia più stretta per i contenuti, magari nel caso di un unico div si può risolvere impostando un padding o qualcosa del genere.

Può essere una soluzione?

Eventualmente, ti è possibile postare il link della pagina in questione per capire meglio la situazione e, nel caso, poterti consigliare qualcosa in maniera più mirata?

Se ti serve avere necessariamente 2 div, in tal caso una soluzione potrebbe essere quella di inibire gli eventi mouse di quello che sta sopra. Puoi farlo con pointer-events:none; ma tieni presente che tale proprietà è ereditabile per cui influisce su tutti gli eventuali discendenti all'interno di quel div, a meno che non sia sovrascritta col valore auto per quegli eventuali elementi che vuoi lasciare "attivi".

[bonimba]

Ciao KillerWorm, e grazie per la risposta.
allora ho semplificato il tutto come hai consigliato tu e cioè utilizzare un unico div per fare il tutto e poi con a funzione rgba(r,g,b,a) ho fatto il resto.
Tutto perfetto e funzionante.
Sai quando ti impunti su una cosa e vuoi che funzioni così come l'hai fatta e magari per farla ci sono soluzioni molto più semplici come hai consigliato tu....meglio le soluzioni più semplici.
Grazie ancora
Federico

[KillerWorm]

allora ho semplificato il tutto come hai consigliato [...] Tutto perfetto e funzionante.

Benissimo.

Sai quando ti impunti su una cosa e vuoi che funzioni così come l'hai fatta e magari per farla ci sono soluzioni molto più semplici

Sai, qualcuno una volta disse: "Complicare è facile, semplificare è difficile".

Personalmente ne ho viste tante, per questo so che la maggior parte delle volte la soluzione è da cercare fuori dalla situazione che viene presentata. Ad ogni modo, nulla è scontato e non si finisce mai di imparare; sono convinto che se ne vedranno ancora tante

Buon proseguimento, alla prossima.