6 votes

Comment déclencher l'événement CSS hover dans IE lorsque la souris passe sur le texte d'un élément de saisie ?

En utilisant IE avec le code HTML ci-dessous, je n'arrive pas à faire en sorte que l'arrière-plan de l'entrée devienne rouge si je passe ma souris immédiatement sur le mot "Test". En revanche, il devient rouge si je passe la souris sur la zone située à droite du mot "Test", mais toujours dans les limites de l'élément de saisie. Cela ne se produit pas avec Firefox ou Chrome. Quelle est la bonne façon de définir mes styles pour que cela fonctionne correctement dans IE ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
        input { border: 0px; margin:0; padding:0; }
        input:hover { background: red }
    </style>
  </head>
  <body>
    <input type="text" value="Test" />
  </body>
</html>

2voto

Dustin Laine Points 22815

Ce problème est dû au fait qu'IE ne reconnaît pas l'élément :hover classe psuedo sur non-ancrage ( <a> ), à moins que vous n'utilisiez les éléments STRICT type de document :

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

http://jsfiddle.net/durilai/Xb8Bg/1/

2voto

mrtsherman Points 19573

Il semble qu'il s'agisse d'un bogue dans la manière dont IE gère l'événement "hover". Dans cet exemple, j'ai modifié le survol en form:hover input qui devrait se déclencher quel que soit l'endroit où vous vous trouvez. Mais il y a encore des bogues.

http://jsfiddle.net/Xb8Bg/74/

Lors de mes tests, j'ai constaté que la bordure déclenche le survol, ce qui lui permet de "fonctionner". Cependant, vous pouvez toujours déplacer votre souris très rapidement au centre du texte et reproduire le bogue. Cela m'indique donc que l'implémentation globale est défectueuse.

La meilleure solution que j'ai trouvée est d'utiliser une bordure transparente. Cette solution souffre bien sûr du problème de déplacement rapide de la souris que je viens de mentionner, mais c'est mieux que rien. Je soupçonne qu'une solution js pourrait être facilement conçue si vous avez vraiment besoin d'une bordure de 0px.

input:hover { border: 1px solid transparent; }

2voto

Kornilov Ruslan Points 21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

Cela permettra :hover et d'autres choses pour IE

1voto

zhujy_8833 Points 301

Vous pouvez utiliser javascript pour l'activer.

//css
input{
   border: 0px; 
   margin:0; 
   padding:0;
}

input.hover{
  background:red;
}

//javascript
$(document).ready(function() {
  var input = $("input");
  input.mouseover(function(e) {        
    $(this).addClass("hover");
  }).mouseout(function(e) {
    $(this).removeClass("hover");
  });
});

0voto

San Points 137

Indiquer la hauteur et la largeur de la boîte de saisie

input { border: 0px; margin:0; padding:0;width:200px;height:25px; }

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X