aiuto con codice css

**stis** · 21-01-2012, 17:06

Ciao a tutti,
"non so se la discussione che ho apero 5 minuti fa sia stata postata (5 minuti fa non ero iscritto nella sezione css) per sicurezza la riposto"

Sto facendo un sito in HTML per un mio amico che ha una piccola attività privata.
per ora in html ho fatto una lista di prodotti del tipo

codice:

[*]prodotto1[*]prodotto2[*]prodotto3

ecc...
io vorrei fare in modo che quando il mouse passa su prodotto1 accanto di esso esca il suo prezzo in modo tale che l'utente che naviga sul sito non deve cliccarci sopra.
ovviamente poi la stessa cosa adrà fatta per prodotto2 e così via.
spero di essere stato chiaro con la domanda, per qualsiasi cosa chiedetemi!
grazie

per essere più chiaro di default quando l'utente vede la pagina la deve vedere così

codice:

[*]prodotto1[*]prodotto2[*]prodotto3

una volta che l'utente passa sopra a "prodotto1 prodotto2 prodotto3 ecc..." la pagina la deve vedere così

codice:

[*]prodotto1           commento[*]prodotto2           commento[*]prodotto3           commento

però se l'utente passa sopra a "prodotto1" la scritta "commento" dovrà vedersi solo per prodotto1;
quando l'utente si sposterà su "prodotto2" la scritta "commento" dovrà vedersi sia su "prodotto1, sia su prodotto2";
quando l'utente si sposterà su "prodotto3" la scritta "commento" dovra vedersi su "prodotto1, prodotto2 e prodotto3"; e così via

**mrseo88** · 21-01-2012, 21:12

mi sa che hai sbagliato sezione,dovresti postare il post in sezione php 0 js

**gcarless** · 21-01-2012, 22:01

Ciao,
la cosa via css è fattibile, anche se per ragioni di idee io preferisco la via js con l'utilizzo di jquery per qualche effetto.

Ad ogni modo, via css mi è venuta in mente questa soluzione:

codice:

<head> 
	<style type="text/css"> 
		li span { display: none; }
		li:hover span { display: inline; }
	</style>
</head> 
<body>
	<ul>
		[*]
			Prodotto 1
			<span>Prezzo 1</span>
		
		[*]
			Prodotto 2
			<span>Prezzo 2</span>
		
		[*]
			Prodotto 3
			<span>Prezzo 3</span>
		
	[/list]
</body>

**stis** · 21-01-2012, 23:42

@gcarless ti ringrazio per il codice css che mi hai passato anche se mi spiace dirti che non funziona.
provo a postare la domanda nella sezione js;
comunque se ti dovesse venire in mente qualcos'altro fammi sapere!!!
grazie ancora

**gcarless** · 22-01-2012, 01:11

Il codice che ti ho postato funziona su firefox 9.0, chrome 16 e ie7 - 8 - 9.
Altri browser e versioni non ho provato.

Per la versione js, una possibile è questa:

codice:

<head> 
	<style type="text/css"> 
		dd { display: none; }
	</style>
	<script type="text/javascript">
		function show(id) {
			document.getElementById(id).style.display = "block";
		}
		function hide(id) {
			document.getElementById(id).style.display = "none";
		}			
	</script>
</head> 

<body>
	<dl>
		<dt onmouseover="show('prezzo_1')" onmouseout="hide('prezzo_1')">Prodotto 1</dt>
	        <dd id="prezzo_1">Prezzo 1</dd>
	        <dt onmouseover="show('prezzo_2')" onmouseout="hide('prezzo_2')">Prodotto 2</dt>
	        <dd id="prezzo_2">Prezzo 2</dd>
	        <dt onmouseover="show('prezzo_3')" onmouseout="hide('prezzo_3')">Prodotto 3</dt>
	        <dd id="prezzo_3">Prezzo 3</dd>
         </dl>
</body>

In questo caso userei una lista di definizione, logicamente mi sembra la più appropriata.

**mangusta91** · 22-01-2012, 04:08

Usa un tooltip jquery, ne trovi 10 milioni su google

**fcaldera** · 22-01-2012, 11:27

riapri una nuova discussione su jQuery con un titolo più appropriato, grazie

Discussione: aiuto con codice css

Strumenti discussione

Ricerca discussione

Visualizza

aiuto con codice css

Permessi di invio