Hover vs a href

**Kian987** · 19-08-2011, 15:25

Ciao

Utilizzo la funzione hover per far comparire, al passaggio del mouse, un'area dove vi è scritto del testo. Ovviamente lo faccio sfruttando gli <a></a>. Funziona tutto a meraviglia ma oggi vengo a scoprire che se inserisco un link <a href=> tutto si "sfascia".

Ora le cose sono 2. O realizzo il link senza usare l'<a href> (???) o faccio funzionare l'hover senza <a>. Entrambe le cose mi risultano impossibili... o no? Idee?

Grazie

**Simo990** · 19-08-2011, 17:54

Nessuna delle due cose è impossibile, puoi benissimo usare qualsiasi altro tag html per ottenere lo stesso effetto, ma <a> è il migliore perché gode della retrocompatibilità con IE8 e versioni inferiori (in parole povere un browser come IE6 non supporta la pseudoclasse :hover su elementi diversi da <a>, quindi avresti problemi usando altri tag)

**Prill** · 19-08-2011, 18:02

Non è chiaro il problema, è legato a tutti i collegamenti o solo a quelli su cui è impostata la visualizzazione del tuo div? Vedere il codice o la pagina on line (anche solo una pagina di prova), sarebbe utile

**Kian987** · 19-08-2011, 19:24

codice:

<a>
<div class="gruppo"><div class="gruppo_contenuto">TESTO</div></div>
</a>

Ci passo sopra con il mouse e si vede "TESTO". Se però vado ad inserire

codice:

<a>
<div class="gruppo"><div class="gruppo_contenuto"><a href=#>TESTO</a></div></div>
</a>

Sballa tutto. Questo è il css interessato

codice:

a .gruppo {
    background: none repeat scroll 0 0 transparent;
    color: #444444;
    display: none;
    height: 160px;
    letter-spacing: normal;
    margin: 0 0 0 -531px;
    position: absolute;
    white-space: normal;
    width: 385px;
}
.gruppo_contenuto {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 160px;
    letter-spacing: normal;
    margin: 16px 0 0 553px;
    position: absolute;
    width: 360px;
}

Originariamente inviato da Simo990
Nessuna delle due cose è impossibile, puoi benissimo usare qualsiasi altro tag html per ottenere lo stesso effetto

Tipo?

**Simo990** · 19-08-2011, 19:45

Tipo <span>, tanto per dirne uno. Ma :hover dov'è? Posta tutto il css o ancora meglio una pagina di prova, altrimenti non possiamo aiutarti.
Comunque l'attributo href puoi metterlo al primo <a> piuttosto che crearne uno nuovo

codice:

<a href="#">
<div class="gruppo"><div class="gruppo_contenuto">TESTO</div></div>
</a>

**Kian987** · 19-08-2011, 20:05

Ho isolato il codice interessato. Questo è come funziona normalmente:

http://www.virusgaming.net/test/index.php

Questo è il macello che esce fuori non appena vado ad aggiungere il link:

http://www.virusgaming.net/test/link.php

**Simo990** · 19-08-2011, 21:10

E' un bel macello anche tutto il resto del codice...

comunque facendo alcune prove ho notato che effettivamente il tag <a> e anche altri (come

ad esempio) annidati all'interno di un altro tag non vengono visualizzati... è strano. Ad ogni modo ho visto che se si usano gli ID o le classi non ci sono più problemi. Posto qui una prova funzionante, puoi prendere spunto da questa e magari può essere utile anche ad altri

codice:

<!DOCTYPE html>
<html>
	<head>
		<title>prova</title>
		<style type="text/css">
			.contenitore{
				display:block;
				width:200px;
				height:100px;
				background-color:#ACC;
			}
			.testo{
				display:none;			
			}
			.contenitore:hover .testo{
				display:block;			
			}
		</style>
	</head>
	<body>
		<span class="contenitore">
		Passa il mouse qui sopra per visualizzare il testo sottostante.
		<span class="testo">Questo è il testo e questo è un link.</span>
		</span>
	</body>
</html>

Di solito si usa JavaScript per questo tipo di effetti, ma in CSS come vedi si può ottenere la stessa cosa in modo più "pulito".

Spero di essere stato di aiuto, ciao!

**Kian987** · 19-08-2011, 21:23

Non ho ancora letto il tuo messaggio (ora lo faccio) ma ripensandoci a mente fredda <span> mi ha ricordato tante cose. Il fatto è che non l'ho creata io la pagina nè il css.

Faccio sapere. Intanto grazie.

**Kian987** · 23-08-2011, 02:28

Trovandomi obbligatoriamente in un posto molto noioso mi sono "divertito" a impazzirmi con questo problema provando, oltre al tuo, ogni possibile workaround che ho trovato in rete. Il responso è crudele.

Applicando la tua logica va tutto a meraviglia se non fosse per un piccolo problema che non riesco a risolvere. Il testo deve comparire con l'hover dentro una div che funge da cornice e invece gli si piazza sopra. Ho giocato per ore con gli z-index senza successo. Ho isolato il problema a questo indirizzo:

http://www.virusgaming.net/test/tester.php

Ho lasciato i colori di sfondo per far capire dove compare ogni div.

p.s. Non me ne vogliate ma il codice non l'ho fatto io. Il css è un macello perchè non ancora capisco quali sono le parti necessarie. E' che devo finire questo lavoro lasciato incompiuto da un'altra persona

Discussione: Hover vs a href

Strumenti discussione

Ricerca discussione

Visualizza

Hover vs a href

Permessi di invio