28172 sujets

CSS et mise en forme, CSS3

[Résolu] Effet au survol innéfficace sur IE

Bonjour,

j'ai un formulaire avec une image pour l'exécuter :

HTML



 
 
			<div class="ico_01">
				<input type='submit' class="go" style="background:url(images/poub.jpeg) no-repeat"; value="" name="Rechercher"" />
			</div>


et css



 
 
.go
{
width: 24px; 
height: 24px; 
border: none;
}
 
.go:hover
{
cursor: pointer 
}


mon souci c'est que l'effet au survol, je le vois sur FireFoxe mais sur IE 6...

Existe-t-il un moyen afin que'il se voitr sur IE 6 ?

Merci d'avance pour votre aide.
En effet la pseudo classe :hover ne fonctionne que sur les éléments de type <a> sur IE6, il te faudra opter pour javascript pour obtenir l'effet obtenu ou accepter une dégradation gracieuse.

Il existe un 'behavior' pour IE6 qui te permettra de l'utiliser de manière, presque, transparente dans IE6.

csshover.htc
salut !

ou ça, c'est du javascript aussi avec des commentaires conditionnels


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<!--[if lte IE 6]>
<script type="text/javascript" language="javascript">

function rollover() {
	                      document.getElementById('bouton').style.cursor = 'pointer';
                         }


</script>
<![endif]-->


<style type="text/css">

input.go

	  {  background-image: url('images/poub.jpeg');
	     background-repeat: no-repeat;
	     width: 24px;
	     height: 24px;
             background-color: transparent;
             border: none;
	   }

input.go:hover

	  {   cursor: pointer;  }

</style>

</head>

<body>


<!--[if lte IE 6]>

<input id="bouton" class="go" type="submit" value="" name="rechercher" onmouseover="rollover();"  />

<![endif]-->

<!--[if gte IE 7]>

<input class="go" type="submit" value="" name="rechercher" />

<![endif]-->

<!--[if !IE]><-->
<input class="go" type="submit" value="" name="rechercher" />
<![endif]-->

</body>
</html>
bonjour,

Pourquoi faire compliqué ? 

.go 
{ 
width: 24px;  
height: 24px;  
border: none; 
cursor: pointer ;
}

(tu as un point-virgule en trop dans ton html , aprés ta declaration de style .. ou devant value )

GC
Salut,

tu as raison gc-nomade, ta solution fonctionne nickel.

Merci.
Modifié par samb01 (23 Mar 2010 - 11:14)
Sujet clos
Aller à