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".