salve,

nel mio sito ho sempre utilizzato JS per impostare su un div un effetto hover (con jquery seleziono l'id del div e tolgo/aggiungo la classe che mi fà l'effetto selezionato) e sempre con jquery imposto l'evento link!

ora, è possibile fare tutto questo semplicemente con css?

a titolo di esempio, vorrei ottenere un pulsante tipo quelli che ci sono su questo sito in alto (HTML.it, Siti, Servizi, News... Games, Hosting, Corsi)...

lasciando perdere sfumature o grafiche particolari, per ora mi basta una grafica semplice. poi ci gioco sopra a mio piacimento.

sò dell'esistenza del .hover da css, che però non funziona su tutti i browser (es IE);
e per rendere il link cliccabile? (cioè dove esce la "manina", e cliccandoci mi porti su un'altra pagina).

insomma, vorrei trovare una soluzione CSS cross-browser

quello che ho fatto fin ora :

codice:
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn1').mouseover(function() { $(this).removeClass().addClass('optmenuparton'); });
		$('#btn2').mouseover(function() { $(this).removeClass().addClass('optmenuparton'); });
		$('#btn3').mouseover(function() { $(this).removeClass().addClass('optmenuparton'); });
		$('#btn4').mouseover(function() { $(this).removeClass().addClass('optmenuparton'); });
		$('#btn5').mouseover(function() { $(this).removeClass().addClass('optmenuparton'); });
		$('#btn6').mouseover(function() { $(this).removeClass().addClass('optmenuparton'); });
		$('#btn7').mouseover(function() { $(this).removeClass().addClass('optmenuparton'); });												
		
		$('#btn1').mouseout(function() { $(this).removeClass().addClass('optmenupartoff'); });
		$('#btn2').mouseout(function() { $(this).removeClass().addClass('optmenupartoff'); });
		$('#btn3').mouseout(function() { $(this).removeClass().addClass('optmenupartoff'); });
		$('#btn4').mouseout(function() { $(this).removeClass().addClass('optmenupartoff'); });
		$('#btn5').mouseout(function() { $(this).removeClass().addClass('optmenupartoff'); });
		$('#btn6').mouseout(function() { $(this).removeClass().addClass('optmenupartoff'); });
		$('#btn7').mouseout(function() { $(this).removeClass().addClass('optmenupartoff'); });												
	});				
</script>

<div class="optionmenu">
	<div class="optmenupartoff" id="btn1">
		<div class="optmenulabel">
			Edit
		</div>
	</div>
	
	<div class="optmenupartoff" id="btn2">
		<div class="optmenulabel">		
			Remove
		</div>
	</div>

	<div class="optmenupartoff" id="btn3">
		<div class="optmenulabel">
			Export
		</div>
	</div>
	
	<div class="optmenupartoff" id="btn4">
		<div class="optmenulabel">
			Vote
		</div>
	</div>

	<div class="optmenupartoff" id="btn5">
		<div class="optmenulabel">		
			Categories
		</div>
	</div>
	
	<div class="optmenupartoff" id="btn6">
		<div class="optmenulabel">		
			History
		</div>
	</div>
	
	<div class="optmenupartoff" id="btn7">
		<div class="optmenulabel">
			Comments
		</div>
	</div>	
</div>



.optmenupartoff{width:76px; text-align:center; float:left; font-weight:bold; height:25px; background-color:#FFFFFF; margin-left:10px; margin-right:10px;
 border:#666666 ridge 2px;}
 .optmenuparton{width:76px; text-align:center; float:left; font-weight:bold; height:25px; background-color:#CCCCCC; margin-left:10px; margin-right:10px;
 border:#666666 ridge 2px;}
saluti e grazie per il vostro tempo