div come bottone : cliccabile e con effetto

[markzzz]

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 :

<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

[fcaldera]

puoi farlo usando delle liste ordinate come nel sito cssplay.co.uk, sezione menu

se non te la senti di modificare tutto, almeno ottimizza quel javascript... così diventa ingestibile
togli la classe optmenupartoff dal codice html e definisci i div in modo che assumano lo stile che avrebbero da non selezionati . Quando li selezioni aggiungi la classe optmenuparton, quando sono deselezionati la togli.

$(document).ready(function() {
    $('.optionmenu > div').hover(function() {
        $(this).addClass('optmenuparton');
    },
    function() {
        $(this).removeClass('optmenuparton');
    }
);

[markzzz]

Originariamente inviato da fcaldera
definisci i div in modo che assumano lo stile che avrebbero da non selezionati

eh ma è proprio in optmenupartoff che definisco come devono essere da non selezionati :
quindi se imposto quella classe come iniziale, nel momento che aggiungo optmenuparton devo togliere optmenupartoff no?

[fcaldera]

Originariamente inviato da fcaldera
definisci i div in modo che assumano lo stile che avrebbero da non selezionati

[markzzz]

eh ho capito..ma per definirli associo una classe (o gli scrivo style:"attributi")...ma preferisco gestirla con la classe...

[markzzz]

alla fine ho risolto con css, così :

a.bmenu:link {width:90px; float:left; background-color:#000000; color:#FFFFFF; text-decoration:none; padding:1px; border:#FFFFFF 3px ridge;}
a.bmenu:visited {width:90px; float:left; background-color:#000000; color:#FFFFFF; text-decoration:none; padding:1px; border:#FFFFFF 3px ridge;}
a.bmenu:hover {width:90px; float:left; background-color:#990000; color:#FFFFFF; text-decoration:none; padding:1px; border:#FFFFFF 3px ridge;}

.headermenubottom{width:98px; float:left; background-color:#000000; text-align:center;}

<div class="headermenubottom">
    HOME
</div>

sembra funzionare perfettamente se ho sbagliato qualcosa fatemi sapere...

saluti!!!

[Henry.Chinaski]

Se non ho preso un abbaglio, anche QUESTO tutorial potrebbe esserti d'aiuto.

[markzzz]

ottimo! grazie