Surbrillance d'une DIV

Bonjour à tous.

Je cherche à mettre en surbrillance des titres d'actu au passage de la souris.
J'ai réussis très facilement en CSS, pas de problème.

Cependant, la surbrillance commence au début de la première lettre et se termine à la fin de la dernière lettre de mon lien.

N'y a t-il pas moyen de définir la longueur de la zone en surbrillance ? Car j'aimerais que celle-ci soit plus longue que le texte, et ce, sur chaque ligne de titre.


voilà ce que j'ai fait dans mon code de page :

<div class="ligne_actu_iphone" id=#ID_ARTICLE>[(#DATE|affdate{'d-m'})] : <a href="#URL_ARTICLE" onMouseover="document.getElementById('#ID_ARTICLE').style.background='#333333'" onMouseout="document.getElementById('#ID_ARTICLE').style.background='none'"><span class="titres_actu_iphone">[(#TITRE|couper{40})]</span></a></div>

et voilà mon CSS correspondant :

.ligne_actu_iphone {
	font: 12px/15px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
	color: #999999;
	width: 294px;
}
.ligne_actu_iphone a:link{
	font: 12px/15px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
	color: #999999;
	width: 294px;
}
.ligne_actu_iphone a:hover{
	font: 12px/15px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
	color: #999999;
	width: 294px;
}
.ligne_actu_iphone a:visited{
	font: 12px/15px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
	color: #999999;
	width: 294px;
}

N'y a t-il pas plus simple ? J'aimerais me passer du JavaScript sur ce coup-ci.
Rien qui me permette de tout gérer depuis ma feuille de style...et qui ne soit pas trop tordu ?

Merci à vous.


P.S : Je précise que ce code fonctionne très bien. Je recherche uniquement une alternative plus simple.
Modifié par Archos (04 Jan 2009 - 01:15)

Bonjour Archos,

Je ne suis pas très sûr de comprendre ta problèmatique pas plus que la solution javascript
As-tu essayer les marges internes (padding) sur les liens ?

.ligne_actu_iphone a:link{
	font: 12px/15px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
	color: #999999;
	width: 294px;
        [#blue]padding:0 10px; (par exemple);[/#]
}
.ligne_actu_iphone a:hover{
	font: 12px/15px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
	color: #999999;
	width: 294px;
       [#blue] background:#333333;[/#]
}

Quoiqu'il en soit, attention à l'ordre des déclarations de l'état de tes liens

Cdt,
Sylvain

Bonjour 6l20,

Voici un lien vers ma page de DEV, peut être que ce sera plus clair :

http://81.65.172.225:8888/macboosterv6/

Comme tu peux le voir sur les actus iPhone, la surbrillance au passage de la souris couvre toute la largeur du fond gris. Ceci est fait grâce au code que j'ai joins dans mon premier post et qui fonctionne très bien.

Ce que je voulais savoir en fait, c'est s'il existe une manière de faire ce que j'ai déjà fait, mais uniquement en CSS. Sans passer par le javascript que j'ai ajouté à mon lien. En gros, y a t-il une librairie ou juste une série de fonctions CSS qui gère la surbrillance de manière un peux plus avancée qu'un simple a:link, a:hover etc...?


Je ne sais pas si j'ai été beaucoup plus clair ?

bonjour,
si la 'surbrillance' , s'applique au lien , as tu essayer simplement en les formattant en block ?

a {display:block;}

Pour qu'il s'etale sur toute leur largeur.
GC

Non, je test ca, merci.

Re,

Oui, c'est effectivement plus clair
Il "suffit" d'appliquer à ton "div" les propriétés que tu souhaites au survol :

.ligne_actu_iphone:hover {
	background: #333;
}

Petit soucis, papy IE6 (© Florent V.) n'applique la pseudo-classe hover que sur les balises de liens...il faudrait donc passer par javascript pour émuler cette pseudo-classe pour les versions d'IE < 7

Tu pourrais éventuellement revoir un peu le code html pour intégrer la date directement dans le lien :

<div class="ligne_actu_iphone" id=#ID_ARTICLE><a href="#URL_ARTICLE"><span class="titres_actu_iphone">[(#DATE|affdate{'d-m'})] : [(#TITRE|couper{40})]</span></a></div>

nb: le span est-il ici indispensable ?

Et en css :

.ligne_actu_iphone a:link,.ligne_actu_iphone a:visited{
	font: 12px/15px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
	color: #999999;
	display:block;
}
.ligne_actu_iphone a:hover{
	background: #333;
}

A tester, je ne connais pas très bien spip

J'insiste sur l'ordre de déclaration des différents états de tes liens (cf lien donné plus haut) d'autre part, comme tu te trouves en début de projet, il ne serait pas inutile de vérifier la validité de ton code html et css dès maintenant si tu ne veux pas avoir trop de travail par la suite...

Concernant la proprosition de gcyrillus, qui est effectivement pleine de bon sens, elle posera un problème au niveau de la date qui n'est initialement pas comprise dans le lien et provoquera un retour à la ligne, elle n'est donc fonctionnelle que si la date est comprise dans le lien

Enfin, dans css, il y a cascade (héritage et tout et tout) il n'est donc pas utile de répéter certaines propriétés (pour les liens notamment)

Bon courage,
Cdt,
Sylvain
Modifié par 6l20 (06 Jan 2009 - 18:41)