CSS et Hover

Bonjour,

Soit le tableau suivant dans une page HTML :

  <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
   <tr>
    <td class="ds">
     <ul class="ds">
      <li class="ds">Texte 1</li>
      <li class="ds">Texte 2</li>
      <li class="ds">Texte 3</li>
      <li class="ds">Texte 4</li>
     </ul>
    </td>
  </tr>
</table>

Soit le code CSS suivant :

td.ds { vertical-align: top;  border-right: 2px solid #6D99B2;  width: 188;  padding-top: 28px; }
ul.ds { list-style-image:url(images/0001.gif);  vertical-align: middle; }
li.ds { padding: 4 4 4 16; cursor: hand; }
.ds:hover li { background-color: #0A6282; border: 2px solid white; }

Lorsque je passe au dessus de ma liste le changement de style n'est pas pris en compte. Quelqu'un saurait-il ou se situe l'erreur ?
Merci d'avance.

B onsoir...
pour des menus pure CSS il y a ceci [ Lien ]
;0)

C'est du css ou js ici ?

--------------------------------------------------------------------------------------------------
         Ilvaut mieux poser une question et passer pour bête que le rester toutesa vie

PetoleTeam, je te remercie pour ta reponse, mais je voudrais pouvoir utiliser le HOVERsur n'importe quelle balise sans pour autant utiliser de lien .

Bonjour, je crois que tu n'as pas d'autre choix que d'utiliser une balise, internet explorer a du mal à interprêter le Hover sur autre chose.....

Cf: http://zonecss.free.fr/style_css/feuille_css_hover.html ( il est écrit que le hover n'est inteprêter que pour la balise a )

de plus, il faudrait ( si cela ne te dérange pas ) utiliser le cursor:pointer plutôt que hand ( spécifique IE encore )

Voilà

[o-_-o]

Merci de ta reponse Zobibol.
J'ai regarder ton lien et effectivement d'apres ce site il semblerait que le pseudo-element :css HOVER ne puisse être utiliser qu'avec la balise de lien.

Cependant d'apres les liens suivants, cela reste possible :
- [ Lien ]
- [ Lien ]

C'est pourquoi je ne comprends pas ce qui cloche dans mon code.

Sur le site de microsoft, il ne parle que d'internet explorer 7
et sur l'autre site, ( dynamicdrive ) ils utilisent tout de même la balise <A> pour faire apparaître l'image agrandie ( c'est la balise <A> qui contient les deux images )
Je crains fortement que tu sois obligé d'utiliser la balise <A> ...

[o-_-o]

Bonjour

un début de réponse ici : il faut utiliser des fichiers externes .htc :
[ Lien ]

Cordialement
Roro webDev

Oui, c'est vrai, je viens de réétudier le code de Dynamicdrive et en effet la balise span est contenu dans une balise lien !

Sinon il existe une méthode qui marche tout le temps, le traitement sur le mouseOver, mouseOut
du coup ton style devient
    .dsTD { vertical-align: top;  border-right: 2px solid #6D99B2;  width: 188px;padding-top: 28px; }
        .dsUL { list-style-image:url(images/0001.gif);  vertical-align: middle; }
        .ds { padding: 4 4 4 16; cursor: pointer; width:100%; height:100%; }
        .dsOver { background-color: #0A6282; border: 2px solid white; cursor: pointer; }

et dans ta table:
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
   <tr>
    <td class="dsTD">
     <ul class="dsUL">
      <li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'" >Texte 1</a></li>
      <li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</a></li>
      <li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</a></li>
      <li class="ds" onmouseover="this.className='dsOver'" onmouseout="this.className='ds'">Texte 2</a></li>
     </ul>
    </td>
  </tr>
</table>

...

[o-_-o]