Erreg (Normal User)
Newbie
Messaggi: 19
Iscritto: 13/12/2012
|
ho preparato un menų con pių voci e ogni voce un sottomenų ,i vari sottomenų sono nascosti finchč li mostro passando con il mouse sopra la voce del menų madre , di seguito posto il codice
Codice sorgente - presumibilmente Javascript |
<!DOCTYPE html> <head> <link type="text/css" href="menuStyle.css" rel="stylesheet"/> <script type="text/javascript" src="menuScript.js"></script> </head> <body > <ul> <li class="livello1"id="a1" ><a href="#">uno</a> <ul id="ul21"> <li class="livello2"><a href="#">uno_uno</a></li> <li class="livello2"><a href="#">uno_due</a></li> <li class="livello2"><a href="#">uno_tre</a></li> </ul> </li> <li class="livello1"id="a2"><a href="#">due</a> <ul id="ul22"> <li class="livello2"><a href="#">due_uno</a></li> <li class="livello2"><a href="#">due_due</a></li> <li class="livello2"><a href="#">due_tre</a></li> </ul> </ul> </body> </html>
|
di seguito i due file CSS e JS
Codice sorgente - presumibilmente Plain Text |
.livello1{
float:left;
list-style-type:none ;
text-align:center;
height:30px;
line-height:30px;
border-bottom: 5px solid red ;
color: black;
width:200px;
background-color: black;
border-radius: 18px;
margin-left: 100px;
}
#ul21,#ul22 {
text-align: center;
padding-left: 0px;
margin-top: 5px;
}
a{
color:white;
text-decoration: none;
}
.livello2{
list-style-type:none ;
text-align:center;
width:200px;
height:30px;
line-height:30px;
background-color: black;
color: black;
border-bottom: 5px solid red ;
border-radius: 18px;
}
|
Codice sorgente - presumibilmente Javascript |
function vedoNonVedo() { if(variabile.style.visibility==="visible") { variabile.style.visibility="hidden"; } else { variabile.style.visibility="visible"; } } window.addEventListener('load',function(){ ul21.style.visibility="hidden"; ul22.style.visibility="hidden"; document.getElementById('a1').addEventListener('mouseover',vedoNonVedo); document.getElementById('a1').addEventListener('mouseout',vedoNonVedo); document.getElementById('a2').addEventListener('mouseover',vedoNonVedo); document.getElementById('a2').addEventListener('mouseout',vedoNonVedo); });
|
la mia domanda č questa : quando intercetto l'evento mouseover o mouseout come faccio a passare alla funzione "vedoNonVedo() " il sottomenų su cui agire ( mostrare /nascondere ) da inserire al posto di " variabile " ? , perche finchč sono 2 menu al limite mi basta scrivere due funzioni uguali che fanno riferimento a due ul diverse , ma se ci sono molti sottomenų la cosa diventa poco logica |
|
|
pierotofy (Admin)
Guru^2
Messaggi: 6230
Iscritto: 04/12/2003
|
Mm, per semplificare le cose ti suggerire di guardare le pseudo-classi CSS :hover e le relazioni tra classi.
Codice sorgente - presumibilmente Plain Text |
.livello1 .livello2{
display: none;
}
.livello1:hover .livello2{
display: block;
}
|
|
|
|
Erreg (Normal User)
Newbie
Messaggi: 19
Iscritto: 13/12/2012
|
Postato originariamente da pierotofy:
Mm, per semplificare le cose ti suggerire di guardare le pseudo-classi CSS :hover e le relazioni tra classi.
Codice sorgente - presumibilmente Plain Text |
.livello1 .livello2{
display: none;
}
.livello1:hover .livello2{
display: block;
}
|
|
nohhh !!! mi hai demoralizzato , con 4 righe di codice funziona tutto alla grande , perō la mia domanda rimane , se voglio passare alla funzione un qualcosa che sia un tag o altro , posso farlo ? se si come ?
nel chiamare una funzione svincolata da addEventListener basta passargli i dati fra parentesi , ma in questo caso ?
ciao e naturalmente grazie . |
|
|
pierotofy (Admin)
Guru^2
Messaggi: 6230
Iscritto: 04/12/2003
|
Prova con:
Codice sorgente - presumibilmente Javascript |
function vedoNonVedo(event){ var tag = event.currentTarget; }
|
Ultima modifica effettuata da pierotofy il 12/11/2014 alle 15:59
|
|
|
Erreg (Normal User)
Newbie
Messaggi: 19
Iscritto: 13/12/2012
|
Postato originariamente da pierotofy:
Prova con:
Codice sorgente - presumibilmente Javascript |
function vedoNonVedo(event){ var tag = event.currentTarget; }
|
|
ho dato un'okkiata al sito linkato , event si porta dietro un mondo , per me in questo momento č troppo , mi accontento delle pseudo classi css anche se mi č sembrato di capire che hover che č quella che al momento mi interessa di pių possa applicare modifiche allo stato soltanto dell'elemento su cui si invoca e ai suoi elementi ( se ci sono ) figli . sbaglio ? |
|
|
pierotofy (Admin)
Guru^2
Messaggi: 6230
Iscritto: 04/12/2003
|
Si.
|
|
|
Erreg (Normal User)
Newbie
Messaggi: 19
Iscritto: 13/12/2012
|
Postato originariamente da pierotofy:
Si. |
hahaha !!!
lo sospettavo , comunque sui vari forum o pagine con esempi e o guide si parla solo dell'elemento su cui si invoca o qualche elemento compreso nell'elemento stesso , cercherō pių a fondo .
|
|
|
