Créer un superbe effet web 2.0 au passage de la souris sur un élément d'une liste

Parmi tous les trucs à la mode Web 2.0, il va sans dire qu'un de ceux-ci a beaucoup été apprécié par l'ensemble de l'équipe PcKULT.NET. L'effet est bien simple et vous l'avez certainement déjà rencontré sur quelques sites web récents. Mais quel est cet effet ? Difficile de l'expliquer, mais si on peut décrire l'effet en mots, celui-ci permet de générer un changement de couleur au passage de la souris non pas sur un lien, mais sur un bloc div autour du lien. Voyer l'image suivante, comme on dit, une image vaut mille mots.

Effet "mouse over" sur un élément d'une liste

Le code HTML

La partie HTML de cet effet est très simple. Par contre du côté du CSS, il faudra trafiquer le tout afin de faire fonctionner l'effet sous Internet Explorer, car comme tout le monde le sait, ce dernier a encore beaucoup de difficulté à bien gérer les standards web. Afin de créer ce bel effet, nous avons ajouté nos liens dans une liste <ul>. Vous verrez par la suite qu'il est très simple de le faire de cette manière sinon il vous sera beaucoup plus difficile de faire l'effet sans liste.

<div id="lien">
    <ul>
        <li><a href="#" title="Text">Entête du lien
            <em>Description du lien</em>
            <span>Date d'envoie</span></a>
        </li>
        <li><a href="#" title="Text">Entête du lien
            <em>Description du lien</em>
            <span>Date d'envoie</span></a>
        </li>
    </ul>
</div>

Le code CSS

Du côté du CSS, afin que l'effet fonctionne sous Internet Explorer, il faut impérativement que la largeur du lien soit la même que la largeur de l'item de la liste. Si vous ne faites pas cela, l'effet ne sera perceptible que lors du passage de la souris sur le lien et non lorsque vous serez votre curseur sera sur un item de la liste.

#lien ul {
    list-style-type: none;
    width: 400px;
}

#liens li {
    border: 1px dotted #999;
    border-width: 1px 0;
    margin: 5px 0;
}

#lien li a {
    color: #990000;
    display: block;
    font: bold 120% Arial, Helvetica, sans-serif;
    padding: 5px;
    text-decoration: none;
}

* html #lien li a { /* CSS Hack - Permet de voir l'effet sous IE */
    width: 400px;
}

#lien li a:hover {
    background: #ffffcc;
}

#lien a em {
    color: #333;
    display: block;
    font: normal 85% Verdana, Helvetica, sans-serif;
    line-height: 125%;
}

#lien a span {
    color: #125F15;
    font: normal 70% Verdana, Helvetica, sans-serif;
    line-height: 150%;
}

Ajouter cette page à votre Digg-Like préféré