Problème de :hover sur un élement d'une liste

Bonjour,

Actuellement j'affiche les messages de mes membres dans la liste suivante :

<ul id="mp">
  <li>
     <a>** Message 1 (attention dans le CSS suivant cette balise est en display: block;)**</a>
  </li>
  <li>
   etc...
</ul>

Avec le CSS:

ul#mp
{
	margin: 0;
	padding: 0;
	list-style: none;
}
	ul#mp li 
	{
		margin: 1px 1px 0px 1px; 
	}
		ul#mp li a
		{
			display: block;
			padding: 5px;
			color: black;
			background-color:white; 
		}
		ul#mp li a:hover,
		ul#mp li a:focus {
			color: white;
			background: black;
		}

Jusque là tout s'affiche bien, quand ma souris passent sur les message ils passent du noir au blanc.
MAIS: dans le code php, j'ai fait en sorte que quand un message est lu, j'affiche en couleur bleu le block <a> associé, et le hover le laisse en bleu alors que les autres messages passent bien du blanc au noir :

<a href="..." <?php if($non_lu){ echo 'style="background-color: #1166ff;"'; } ?> >

Que faire ?
Modifié par Tchernobyl (08 May 2012 - 15:56)

bonsoir,

le style dans la balise l'emporte sur la feuille de style.
(en anglais http://www.w3.org/TR/CSS21/cascade.html#specificity )

faire usage alors de !important.
(en anglais http://www.w3.org/TR/CSS21/cascade.html#important-rules )

		ul#mp li a:hover,
		ul#mp li a:focus {
			color: white!important;
			background: black;
		}

Cordialement

Merci c'est très sympa (au passage il fallait le membre sur background et pas sur le color ).

D'autre part j'aimerais séparer chaque élément de ma liste par un trait horizontal noir, ça serait facile en ajoutant une bordure en bas de chaque bloc, mais ça impliquerait que le dernier élément de la liste possède aussi une bordure ce que je ne souhaite pas.

Bonjour,

pour le premier cas de figure, le plus propre est de rajouter une classe:

<a href="..."<?php if($non_lu) echo ' class="unread"'; ?>>

et ajouter dans le css:

ul#mp li a.unread {
    background-color: blue; 
}

Le !important fonctionne mais rend la css peu claire. C'est une bonne solution si on n'a pas la main sur le code généré. Ce qui n'est pas ton cas.

pour les traits horizontaux, grâce aux pseudo-classes:

ul#mp li {
    border-bottom: 1px solid #999;
}
ul#mp li:last-child {
    border-bottom: 0;
}

Merci beaucoup à vous, alsacreations n'a pas son pareil en aide CSS

Là c'est juste pour ma culture : comment faire pour souligner une balise <span> contenue dans un élément de la liste, lorsque la souris le survole ? En CSS on peut pas modifier un élément à la condition que quelquechose se passe sur un autre en principe, non ?
Modifié par Tchernobyl (08 May 2012 - 15:59)