CSS + Link = effetti!!!
Oggi vi propongo un post basato sul precedente "ereditarietà dei CSS". La soluzione è piuttosto banale, ma spesso capita che uno non ci pensi. I vostri css menu saranno stra contenti, pronti ad arricchirsi di nuovi effetti rollover.
I principi base sui cui basarsi sono due: l’ereditarietà e lo stato dei link. Sappiamo benissimo infatti che i link sono l’unico elemento nel CSS standard che sono dotati di una definizione in base al loro stato. In particolare lo stato hover che definisce quando il vostro mouse è sopra (gli altri stati sono link, visited, active [...] che in realtà sono pseudo classi).
Per creare stili base per i link normalmente inseriamo questo codice:
<style type="text/css">
#miodiv a{
font-size: 10px;
color: red;
}
#miodiv a:hover{
color: black;
}
</style>
che imposta i link di ogni stato come di 10px e di colore rosso (per tutti i link all’interno dell’elemento con id "miodiv". Mentre imposta lo stato hover, quando siete sopra al link con il mouse, di colore rosso.
Se invece inseriamo questo codice cosa succede?
<style type="text/css">
#miodiv a b{
color: red;
}
#miodiv a:hover b{
color: black;
}
</style>
Abbiamo ridefinito il comportamento di tutti gli oggetti HTML di tipo B (bold) allo stato normale e allo stato con mouse sopra. Provatelo in un codice html del tipo:
<div id="miodiv">
<a href="">Il mio <b>babbo</b> mi vuole tanto bene, la mia <b>mamma</b> me ne vuole di più!</a>
</div>
E se non volete che la frase sia un link? Beh è sufficiente usare un banale barbatrucco: inseriamo una azione nulla dentro il link e definiamo che il link non sia nè sottolineato nè abbia la manina del puntatore (un esempio … ma ognuno poi fà quello che ha necessità di fare).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#miodiv a{
text-decoration: none;
cursor: text;
}
#miodiv a b{
color: red;
cursor: text;
}
#miodiv a:hover b{
color: black;
}
</style>
</head>
<body>
<div id="miodiv">
<a href="javascript:void();">Il mio <b>babbo</b> mi vuole tanto bene, la mia <b>mamma</b> me ne vuole di più!</a>
</div>
</body>
</html>
A questo punto attenzione: la zona sarà attiva in tutto lo spazio identificato all’interno del tag <a>…</a> non solo per i tag (o le classi o le zone/id) che avete ridefinito.
Tutto chiaro? Altrimenti i commenti sono a vostra disposizione se ho tralasciato qualcosa.
Approfondimenti online
La tecnologia informatica ha fatto passi da gigante. In modo particolare Google, che con il suo analizzatore di testo, è in grado di proporre collegamenti contestuali a quanto hai appena letto. Questi i link pubblicitari proposti da Adsense.
non condivido sul cursor: text poichè è una pratica inaccessibile. se un link è un link, concordo sul togliere la sottolineatura se si tratta di un menu (e quindi già identificabile di per sè come insieme di links) ma togliere anche la manina no. come esempio potevi evitarlo
ps il javascript void nel link a che serve?
@Lauryn: ti do ragione sul discorso della manina, solamente se effettivamente l’oggetto su cui tu vuoi fare l’effetto è un link. Altrimenti la manina non serve. Poi intanto vi ho detto come pescare… scegliete voi il pesce: sono certo fare una pesca migliore della mia
Il javascript:void(); serve a NULLA. Nel senso serve per un link vuoto, senza azione. Se tu metti # l’azione c’è: ti va in cima. Molti che inseriscono azioni JS nei link lo accoppiano al # e fa veramente schifo!
Io sono uno di quelli che ha accoppiato le azioni e il # nei link… per evitare che la pagina tornasse in cima dovevo sempre mettere un “return false;” al termine dell’azione.
@Giovanni: ci sono molti metodi. Se io devo consigliare consiglio il javascript:void();
Ricordo che il return false a volte dava problemi scrivendo FALSE come ritorno.