Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Nascondere 2 div sovrapposti

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    63

    Nascondere 2 div sovrapposti

    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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,116
    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".
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    63
    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

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,116
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.