Effetto hover su immagini allineate

**Italians** · 10-07-2009, 10:47

Ciao a tutti,
sto letteralmente impazzendo con un effetto hover creato da css su dei link.

Io vorrei prendere 3 immagini, affiancarle (quindi metterle tutte orizzontalmente) e dare loro un tag a per i link; però vorrei anche che al passaggio del mouse le immagini cambino, il tutto usando solo i css.

Attualmente ho realizzato una cosa del genere:

Css:

codice:

.cont {
	display:inline;
}

.home {
	background:url(immagine1.gif) no-repeat;
	min-width:80px;
	min-height:15px;
}

.home:hover {
	background:url(immagine1hover.gif) no-repeat;
	min-width:80px;
	min-height:15px;
}

.forum {
	background:url(immagine2.gif) no-repeat;
	min-width:80px;
	min-height:15px;
}

.forum:hover {
	background:url(immagine2hover.gif) no-repeat;
	min-width:80px;
	min-height:15px;
}

Html:

codice:

<html>
<head>
	<title>Prova</title>
<link rel="stylesheet" type="text/css" media="screen" title="Stile predefinito" href="css.css" />


</head>

<body>
<ul class="cont"> <li class="home"> <li class="forum">[/list]


</body>

</html>

Qual è il problema? Il problema è che le immagini mi vengono un sopra l'altra, mentre io le vorrei affiancate

Ho provato anche a dare l'attributo inline a li, ho provato invece di usare ul e li ad usare span, ma niente...

Qualcuno potrebbe gentilmente illuminarmi o darmi qualche altra idea per favore?

Grazie in anticipo

**fcaldera** · 10-07-2009, 11:36

per affiancare le tre immagini la lista va bene
però di norma si applica un float:left agli elementi[*] e un clearing non strutturale (cerca nel forum) all'elemento lista <ul>

all'interno degli[*] non devi applicare alcuna regola particolare: assumendo che le immagini (normale e hover) abbiano uguali dimensioni ti basta solo inserirle all'interno di ciascun link <a>

di default la prima immagine all'interno del link sarà visibile, la seconda no
all'hover nascondi la prima e mostri la seconda
puoi farlo assegnando due classi distinte .img1 e .img2

codice:

<img class="img1"... /><img class="img2"... />

quindi

codice:

.img1 { display: block; }
.img2 { display: none; }

a:hover .img1 { display: none; }
a:hover .img2 { display: block; }

**Italians** · 10-07-2009, 12:08

Oh mio Dio, decisamente semplice, grazie veramente tanto

Alla fine ho strutturato così il tutto:

Css:

codice:

#cont {
	float:right;
}

#cont ul{
margin: 0;
padding-left: 0;
list-style: none;

}

#cont li{
float:left;
margin: 10px;
padding: 0;
}

.img1 { display: block; border:0;}
.img2 { display: none; border:0;}

a:hover .img1 { display: none; border:0;}
a:hover .img2 { display: block; border:0;}

Html:

codice:

<html>
<head>
	<title>Prova</title>
<link rel="stylesheet" type="text/css" media="screen" title="Stile predefinito" href="css.css" />


</head>

<body>
<div id="cont">
<ul>[*]http://&#91;img]immagine1.gif&#91;/img]&#91;img]....gif&#91;/img][*]http://&#91;img]immagine2.gif&#91;/img]&#91;img]....gif&#91;/img][/list]
</div>

</body>

</html>

Grazie ancora

Discussione: Effetto hover su immagini allineate

Strumenti discussione

Ricerca discussione

Visualizza

Effetto hover su immagini allineate

Permessi di invio