visibilita div solo css e html

Printable View

30-04-2016, 15.29.54

visibilita div solo css e html

buongiorno a tutti,
ho cercato in giro ma non ho trovato niente rispetto alla mia domanda.....

dato questo codice css:

Codice:

#primo{ position: absolute; top: 40%; bottom: 40%; left: 40%; right: 40%; background-color: yellow; } #secondo{ position: absolute; top: 10%; bottom: 80%; left: 0%; right: 0%; background-color: red; visibility: hidden; }

e questo html:

Codice HTML:

<html> <head> <link rel="stylesheet" type="text/css" media="screen" href="css.css"/> <script type="text/javascript" src="javascript.js"></script> </head> <body> <div id="primo"></div> <div id="secondo"></div> </body> </html>

è la prima volta che uso la visibilità in css, facevo siti solo statici e non dinamici.....
la mia domanda era: come posso fare che quando passo sopra con il mouse nel div 1, mi si renda visibile anche il div 2?

grazie a chi risponde.
30-04-2016, 15.49.09
dreadnaut
In questo caso, visto che i due elementi sono uno di seguito all'altro, puoi usare il selettore +.

Codice:

#secondo { visibility: hidden; } #primo:hover + #secondo { visibility: visible; }

Ci sono diversi lati negativi in questa soluzione però:
- elementi nascosti con visibility: hidden continuano ad occupare spazio, e questo può dare problemi con altri elementi della pagina; di solito si usa display: none
- molti browser per telefoni e dispositivi touch non supportano :hover -non c'è modo di sapere quando un dito è a mezz'aria sopra un elemento
- Se cambi l'ordine degli elementi, o ne aggiungi in mezzo, smette di funzionare
Nascondere e visualizzare elementi esclusivamente via css può sembrare un buon metodo, ma spesso crea altri problemi. Questo soprattutto quando il contenuto è nascosto al caricamento della pagina, e mostrato in risposta ad un evento; l'opposto è meno pericoloso.

Di che contenuto si tratta? Perché vuoi renderlo invisibile?
30-04-2016, 16.02.07

a me serve soltanto per un sito visibile da pc.
devo fare una specie di menu a tendina pero in spazi diversi della pagina e quindi ci sono contenuti sopra e sotto di esso, quindi per renderlo invisibile e farlo saltare fuori solo quando si passa sopra ad un altro div, cosa mi consiglieresti? e come lo faresti? ed in solo css preferibilmente. un altra domanda...
quando io passo sopra al div 1 che mi compare il div 2, se metto il mouse sopra div 2 mi sparisce, c'è una maniera per stopparlo quando sono sopra con il mouse?
avevo pensato cosi:

Citazione:

#primo{
position: absolute;
top: 40%;
bottom: 40%;
left: 40%;
right: 40%;
background-color: yellow;
}

#secondo{
position: absolute;
top: 20%;
bottom: 60%;
left: 0%;
right: 0%;
background-color: red;
visibility: hidden;
}

#secondo:hover{
position: absolute;
top: 20%;
bottom: 60%;
left: 0%;
right: 0%;
background-color: red;
}

#primo:hover + #secondo{
visibility: visible;
}
30-04-2016, 18.57.23
dreadnaut

Citazione:

Originalmente inviato da venerbamirco

a me serve soltanto per un sito visibile da pc.

Non è una cosa che decidi tu :mrgreen: In ogni caso, tradurrò la fase sopra in "questo sito è un esperimento per un numero limitato di visitatori."

Se vuoi che il contenuto resti visibile, puoi includere sia l'elemento su cui passare che il contenuto da visualizzare in un div, ed usare questo come riferimento per le regole della visibilità. I due elementi devono comunque rimanere vicini, visto che appena il mouse ne esce, il secondo sparisce.

Prova a dare un'occhiata a questo esempio.

Se poi fosse stato il mio sito, io avrei lasciato il contenuto a scomparsa visibile di default. Volendo fare un drop-down, lo nasconderei dopo il caricamento via javascript.
30-04-2016, 19.55.32

potresti fare uno schizzo veloce quando puoi per piacere? è da settimane che provo.
allora mi potresti dire come posso fare in css, che al passaggio del mouse si renda visibile un div e che sia possibile passare sopra perché ci metto dei link
01-05-2016, 01.23.58
dreadnaut

L'ho già fatto, il link era nel messaggio precedente :confused:
01-05-2016, 12.44.25

ok grazie, ho risolto questo.
stavo provando a far i che quando sono sopra al div1, il div2 e 3 vengano visibili e che quando ci passo sopra restino immobili e visibili. e fino a qua nessun dubbio. ma quando io passo sopra al div 1, il div 2 e 3 vengono visibili, e se passo sopra continuamente a il div 2 e poi 3, mi spariscono.
non so se ho reso l' idea e cmq ho appena iniziato con il selettore visibilità. ho fatto solo siti statici, non dinamici.

questi sono i codici:

Citazione:

#gara1{
position: absolute;
top: 20%;
left: 0%;
right: 80%;
bottom:70%;
background-color: blue;
}

#gara1opzione1{
position: absolute;
top: 20%;
left: 20%;
right: 60%;
bottom:70%;
visibility: hidden;
background-color: green;
}

#gara1opzione2{
position: absolute;
top: 30%;
left: 20%;
right: 60%;
bottom:60%;
visibility: hidden;
background-color: yellow;
}

#gara1:hover ~ #gara1opzione1{
visibility: visible;
}

#gara1:hover ~ #gara1opzione2{
visibility: visible;
}

#gara1opzione1:hover{
visibility: visible;
}

#gara1opzione2:hover{
visibility: visible;
}

#gara1opzione1:hover ~ #gara1opzione2{
visibility: visible;
}

#gara1opzione2:hover ~ #gara1opzione1{
visibility: visible;
}

Citazione:

<html>

<head>
<link rel="stylesheet" type="text/css" media="screen" href="css.css"/>
<script type="text/javascript" src="javascript.js"></script>
</head>

<body>
<div id="gara1"></div>
<div id="gara1opzione1"></div>
<div id="gara1opzione2"></div>
</body>

</html>
01-05-2016, 13.40.51
dreadnaut

Come ho già scritto prima, usare l'attributo visible porta problemi, usa display. E come ho già scritto prima

Citazione:

Se vuoi che il contenuto resti visibile, puoi includere sia l'elemento su cui passare che il contenuto da visualizzare in un div, ed usare questo come riferimento per le regole della visibilità.

Ho fatto entrambe le cose nell'esempio che ti ho linkato sopra. Partendo da quello, cosa c'è che non ti torna?
01-05-2016, 14.00.06

come ti ho detto, ho appena cominciato con il visibility, il tuo esempio è chiaro ma non risponde alla mia domanda. potresti per piacere correggere il mio codice con solo css, come vuoi te, gia che hai più esperienza di me, cosi capisco quali erano i punti deboli del mio codice? per piacere
01-05-2016, 19.09.56
dreadnaut

Eh, ma se lo correggo come voglio io, diventa esattamente come quello dell'esempio. Ancora non mi hai spiegato perché l'esempio non vada bene. Ti da degli elementi su cui puoi passare il mouse per far apparire altri elementi, via css —cosa manca?
02-05-2016, 16.45.32

se mi mostri il pezzo di codice dell' esempio, forse ci capisco dove ho sbagliato
02-05-2016, 16.50.51
karl94

Il sorgente della pagina lo puoi visualizzare direttamente dal browser. Di solito è sufficiente usare la combinazione CTRL+U, ma faresti bene ad imparare anche ad usare gli strumenti per sviluppatori.
02-05-2016, 18.08.38
dreadnaut

Citazione:

Originalmente inviato da venerbamirco

se mi mostri il pezzo di codice dell' esempio, forse ci capisco dove ho sbagliato

Ah, scusa, avevo dato questo passo per ovvio. Come dice Karl94, il sorgente della pagina è visibile da browser. La scorciatoria di solito è Ctrl-U, oppure tasto destro sul fondo della pagina e poi scegli "Visualizza sorgente". Alternativamente, puoi salvare la pagina sul tuo computer e poi aprirla con il tuo editor preferito.

Puoi fare ciò su qualsiasi sito, e scoprirai un sacco di cose interessanti.
02-05-2016, 19.33.29

E quali sono le opzioni sviluppatori???
02-05-2016, 22.26.54
dreadnaut

Gli strumenti per gli sviluppatori sono quelli che appaiono quando premi F12.
06-05-2016, 14.59.17

gia che voi avete più esperienza di me, io ho creato un codice per far degli effetti in solo css e in questo codice, sono rappresentati due div uno sotto l' altro.
quando passo sopra al div sopra, ce sempre il div sotto che ce sopra. non so se mi sono spiegato.
vi allego i codici, grazie a chi mi risponde

Codice HTML:

<html> <head> <link rel="stylesheet" type="text/css" media="screen" href="css.css"/> <script type="text/javascript" src="javascript.js"></script> </head> <body> <div id="gara1"> </div> <div id="opzione1gara1"> </div> <div id="opzione2gara1"> </div> </body> </html>

codice css:

Citazione:

#gara1{
position: absolute;
top: 20%;
bottom:60%;
left: 30%;
right: 50%;
background-color: green;
}
#opzione1gara1{
position: absolute;
top: 20%;
bottom:60%;
left: 50%;
right: 30%;
background-color: red;
display: none;
}
#opzione2gara1{
position: absolute;
top: 40%;
bottom:40%;
left: 50%;
right: 30%;
background-color: orange;
display: none;
}
#gara1:hover~#opzione1gara1{
display: block;
}
#gara1:hover~#opzione2gara1{
display: block;
}
#opzione1gara1:hover{
position: absolute;
top: 15%;
bottom:55%;
left: 45%;
right: 25%;
background-color: red;
display: block;
}
#opzione2gara1:hover{
position: absolute;
top: 35%;
bottom:35%;
left: 45%;
right: 25%;
background-color: orange;
display: block;
}
#opzione1gara1:hover~#opzione2gara1{
display: block;
}
#opzione2gara1:hover~#opzione1gara1{
display: block;
}
12-05-2016, 15.48.36

in pratica, ho tre div:
-il primo mi serve (quando ci passo sopra) a far comparire gli altri due , inizialmente invisibili.
-il secondo e il terzo li uso come voci di un menu a tendina orizzontale.
il problema e che quando passo sopra al primo div, mi compaiono anche il secondo e il terzo (e fino a qua tutto bene) poi se passo sopra al terzo div, il secondo mi sparisce. come posso far si che il secondo, anche se passo sopra al terzo div , rimanga visibile?
12-05-2016, 23.43.47
dreadnaut

Come mostrato nell'esempio di giorni e giorni fa, metti i due "div", che in realtà dovrebbero essere due link, dentro un unico contenitore, e fai apparire o sparire solo quello —invece dei due pezzi separatamente.