Survol de zone sans javascript

Trop souvent (même si, heureusement, la tendance est à la baisse) on remarque des menus relativement simples qui utilisent javascript pour réaliser des changements d'état au survol ou pour gérer des survols de "zone" plutôt que de texte.

Pourtant, dans la majorité des cas, ces effets peuvent être obtenus en CSS...simple, efficace et propre.

Voici un exemple:

Zone 1 Zone 2

Notez que toute la zone autour des deux liens est cliquable. Voici l'HTML et la CSS utilisée:

HTML

<a href="#" class="zone-link">Zone 1</a>
<a href="#" class="zone-link">Zone 2</a>

CSS

.zone-link {
	display: block;
	float: left;
	clear: none;
	margin: 20px;
	padding: 15px;
	border: 1px solid #ccc;
	font-family: Arial, Helvetica, sans-serif;
}

.zone-link:hover { background: #eee; }     

 

Pour obtenir un changement d'image de fond, rien de plus simple. (smileys trouvés sur mouserunner).

Zone 1 Zone 2

CSS 2

.changing-link {
	display: block;
	float: left;
	clear: none;
	margin: 20px;
	padding: 15px 15px 15px 30px;
	border: 1px solid #ccc;
	font-family: Arial, Helvetica, sans-serif;
	background: url(/sites/default/files/smileys.png) top left no-repeat #ebe6e5;
}

.changing-link:hover { background-position: 0 -45px }