ie hover et display block

Le
Séverin Richard
Voila,

Quand j'affecte un style="display:block" à un element <a>:

sous ff l'evenement "hover" (la souris devient une main) est déclenché
au survol de TOUT l'élément. Même si on ne survol pas le texte.

Sur ie, l'événement se déclenche uniquement au survol du texte, ce qui
est génant pour les boutons qui on "peu" de texte.

Donc je voudrais savoir si il existe une syntaxe, style ou autre chose
pour que le hover (la main) soit déclenché n'importe ou sur l'élément <A>

Il reste bien la possibilité de mettre une image..et c'est la seule que
j'ai trouvé!

Qqun a une soluce??
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #16676091
Séverin Richard a écrit :
Voila,

Quand j'affecte un style="display:block" à un element <a>:

sous ff l'evenement "hover" (la souris devient une main) est déclenché
au survol de TOUT l'élément. Même si on ne survol pas le texte.

Sur ie, l'événement se déclenche uniquement au survol du texte, ce qui
est génant pour les boutons qui on "peu" de texte.



Je n'ai pas ça dans mon IE.6 qui fonctionne comme Fx (pour une fois !).

CSS :
==== a { display: block; width: 80px; text-align: center; float: left;
/* padding: 3px 18px; border: 1px solid; */
color: maroon; background: azure;
text-decoration: none; margin: 2px 15px; }
a:hover { background: #ff6; color: black }

HTML :
===== <p><a href="#">menu 1</a>
<a href="#">menu 2</a>
<a href="#">menu 3</a></p>

Mais j'ai un doc-type dans mon test :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

--
sm
Séverin Richard
Le #16676261
SAM a écrit :
Séverin Richard a écrit :
Voila,

Quand j'affecte un style="display:block" à un element <a>:

sous ff l'evenement "hover" (la souris devient une main) est
déclenché au survol de TOUT l'élément. Même si on ne survol pas le texte.

Sur ie, l'événement se déclenche uniquement au survol du texte, ce qui
est génant pour les boutons qui on "peu" de texte.



Je n'ai pas ça dans mon IE.6 qui fonctionne comme Fx (pour une fois !).

CSS :
==== > a { display: block; width: 80px; text-align: center; float: left;
/* padding: 3px 18px; border: 1px solid; */
color: maroon; background: azure;
text-decoration: none; margin: 2px 15px; }
a:hover { background: #ff6; color: black }

HTML :
===== > <p><a href="#">menu 1</a>
<a href="#">menu 2</a>
<a href="#">menu 3</a></p>

Mais j'ai un doc-type dans mon test :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">



Merci pour le code, en effet il fonctionne.

Pour ma part, les liens <a> sont dans un tableau, c peut-etre pour ca
que le hover ne marche pas comme je veux:

avec le code ci-dessous, seul le premier "<td>" fonctionne (hover sur
toute la balise <a>).. Les autre ne marchent pas!!!

<table>
<tr><td>
<a href="#" class=to_resa style="padding:25px" >menu 2</a>
</td></tr>
<tr><td>
<a href="#" class=to_resa style="padding:25px" >menu 2</a>
</td></tr>
<tr><td>
<a href="#" class=to_resa style="padding:25px" >menu 2</a>
</td></tr>
<tr><td>
<a href="#" class=to_resa style="padding:25px" >menu 2</a>
</td></tr>
</table>

avec:
<style>
a.to_resa{
background:#ccFAcA;
color:#55aa55;
text-align:center;
padding:7px;
margin:0px;
display:block;
}
a.to_resa:hover{
border:1px solid #55aa55;
background:#dcFfdA;
color:#55aa55;
text-align:center;

}
</style>

Je crois etre en présence d'un bug (ie) de plus!!!
Pascal PONCET
Le #16682841
Séverin Richard a écrit :
Je crois etre en présence d'un bug (ie) de plus!!!



Bonjour,

Perso, j'ai pas de pb avec ce code dans IE7.
Je ne me souviens pas non plus que ça en posait avec IE6.
Une seule exception toutefois avec MSIE < 7, le "hover" n'est compris
que sur les balises <A> (mais c'est bien le cas dans l'exemple fourni).

Cordialement,
Pascal
Publicité
Poster une réponse
Anonyme