Effetto hover su un link

**gennaro1992** · 12-01-2011, 21:35

Ciao e buon anno a tutti.
Ho un semplice menu con dei link:
XHTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it">  <head>  <title>Prova</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <link rel="stylesheet" type="text/css" href="prova.css" /> </head> <body> <div id="menu"> link 1 link 2 link 3 link 4 </div>  </body> </html>

CSS

codice:

#menu { overflow:hidden; width:100%; padding:1px; background-color:#FFFFFF; border:1px solid #437E7E; }  #menu a{ display:block; float:left; width:60px; height:25px; margin-left:1px; padding-left:15px; background-color:#F0F7F7; border-left:10px solid #C7E2E2; font-family:arial; font-size:10px; text-transform:uppercase; text-decoration:none; color:#437E7E; line-height:25px; }  #menu a:hover{ background-color:#E5E5E5; border-left:10px solid #CCCCCC; color:#666666; }  #menu a.primo{ margin-left:0; }  #menu a.ultimo{ border-right: 10px solid #C7E2E2; }

Come posso fare che quando vado su un qualsiasi link,appare un'altra barra di menu,mi basta solo un rettangolo,so che devo scriverlo in hover ma non so cosa

**ricman** · 13-01-2011, 13:31

Originariamente inviato da gennaro1992
Come posso fare che quando vado su un qualsiasi link,appare un'altra barra di menu,mi basta solo un rettangolo,so che devo scriverlo in hover ma non so cosa

Non so se ho capito bene le tue esigenze... Credo che html/css non ti basti. Ti servirà l'apporto del javascript (o ajax o jquery).

Magari qui potresti trovare qualche spunto

http://javascript.html.it/script/lista/8/menu/

**gennaro1992** · 13-01-2011, 14:02

vorrei ottenere una cosa del genere http://javascript.html.it/demo/javas...emo_index.html
ma a me interessa che quando vado su un link del menu,esca sotto come nell esempio un rettangolo bianco.
Ma si deve usare per forza javascript ?

**gennaro1992** · 14-01-2011, 21:13

io ho fatto questa cosa semplicissima:

XHTML

codice:

<head>  <link rel="stylesheet" type="text/css" href="abc.css" />   </head>   <div id="MENU">     LINK # 1     LINK # 2     LINK # 3     LINK # 4     LINK # 5     LINK # 6     LINK # 7 </div>  <div id="SOTTOMENU"> LINK # 1 LINK # 2 LINK # 3 </div>

CSS

codice:

div {     font-size: 11px;     font-family: Verdana; }  div#MENU {     text-align: Center;     padding: 15px;     background-color: #DDDDDD;     border: Solid 1px #FF0000; }  a.MENU {     background-color: #AAAAAA;     color: #000000;     font-weight: Bold;     text-decoration: None;     width: 100px;     padding: 1px;     border: Solid 1px #000000;     margin-left: 5px; } a:hover.MENU {     background-color: #778899;     color: #EEEEEE;     font-weight: Bold;     text-decoration: None;     width: 100px;     padding: 1px;     border: Solid 1px #000000; }  div#SOTTOMENU {     text-align: Center;     padding: 15px;     background-color: #DDDDDD;     border: Solid 1px blue; }  a.SOTTOMENU {     background-color: #AAAAAA;     color: #000000;     font-weight: Bold;     text-decoration: None;     width: 100px;     padding: 1px;     border: Solid 1px #000000;     margin-left: 5px;     }      a:hover.SOTTOMENU {     background-color: #778899;     color: #EEEEEE;     font-weight: Bold;     text-decoration: None;     width: 100px;     padding: 1px;     border: Solid 1px #000000; }

E possibile fare che all'apertura del sito compaia solo il div in rosso e poi quando vado con il mouse su un link esce il sottomenu (div blu)?

**gennaro1992** · 15-01-2011, 18:19

per favore qualcuno che mi aiuta, mi sono bloccato.

**gennaro1992** · 16-01-2011, 17:42

up

**gennaro1992** · 17-01-2011, 00:51

Per favore chi mi aiuta,sono in difficoltà,sono bloccato su questo problema da 4 giorni

**gennaro1992** · 17-01-2011, 01:25

Ho preso questo codice tramite ricerche su google

Codice PHP:


<script type="text/javascript"> function Vedi(quale) {   document.getElementById(quale).style.display = 'block'; } function Nascondi(quale) {   document.getElementById(quale).style.display = 'none'; } </script>  </head><body>  [url="#"]Ciao[/url] <div id="id01" style="display:none">CIAO SONO UN DIV NASCOSTO</div>

Allora in parte funziona cioè quando vado su un link del div 1 compare anche il div 2,ma lo posso solo vedere,perchè appena il puntatore del mouse esce dal div 1,il div 2 scompare,come fare in modo che il div 2 scompare solo quando esco dal div 2?

**gennaro1992** · 17-01-2011, 03:24

Potete chiudere,rifaccio la domanda piu precisa

**Mich_** · 17-01-2011, 09:59

Non aprire una nuova discussione sullo stesso argomento (vietato dal regolamento).
Ripeti la domanda rispondendo a questa discussione.

E magari usa una formattazione umana, usando correttamente gli acapo e le indentazioni, in modo da facilitare la comprensione.

Discussione: Effetto hover su un link

Strumenti discussione

Ricerca discussione

Visualizza

Effetto hover su un link

Re: Effetto hover su un link

Permessi di invio