Hover et internet explorer

Auteur
brudao	# 19 Mar 2010 - 18:04:08
5 Posts	Bonsoir! j'applique des hover sur des éléments. j'utilise du javascript pour cela pour que ça fonctionne sous internet explorer. ça marche quand c'est un seul élément. le problème c'est que je veux appliquer cela à beaucoup d'element. chaque élément à un comportement bien précis différent des autres sous l'effet du hover mon javascript: `if(!window.Event){ //IE mais pas Opéra document.onmouseover=function(){ x=window.event.srcElement; if(x.tagName=="SPAN")x.id="hoverInput_IE"; }; document.onmouseout=function(){ if(x.tagName=="SPAN")x.id="hover_IE"; }; }` `echo '<div >'."\n"; echo "<span id='zoneAccueil'>"; echo ancre("#","ACCUEIL"); echo "</span>"; echo '</div> <!-- je veux appliquer un autre hover sur ce element --> echo '<div >'."\n"; echo "<span id='zone2'>"; echo ancre("#","TEST"); echo "</span>"; echo '</div>` #zoneAccueil { position: relative; width: 81px; height:52px; float: left; margin-right:2px; /padding-top:15px;/ text-align:center; background: url(img.jpg) no-repeat; } #zoneAccueil:hover { background: url(img_survole.jpg); } #hoverInput_IE {position: relative; width: 81px; height:52px; float: left; margin-right:2px; background: url(img_survole.jpg) } #hover_IE { position: relative; width: 81px; height:52px; float: left; margin-right:2px; /padding-top:15px;/ text-align:center; background: url(img.jpg) no-repeat; } merci Modifié par brudao (19 Mar 2010 - 18:06)
5 Posts
ZeB_panam	# 21 Mar 2010 - 10:44:25
253 Posts	Salut, J'ai pas forcément compris ce que tu souhaitais faire, hormis appliquer des comportement hover à différents éléments. Via jQuery (et sûrement via d'autres frameworks) tu pourrais faire ça simplement, sans avoir à te soucier d'IE (puisque jQuery est compatible IE6+) : `jQuery(function ($) { // Un élément avec un comportement bien distinct $("#zone_accueil").hover( function () { $(this).css({'background-image':'url(img_survole.jpg)'}); }, function () { $(this).css({'background-image':'url(img.jpg)'}); }); // et un autre élément avec un autre comportement $("#zone_2").hover( function () { $(this).css({'background-image':'url(img_survole_2.jpg)'}); }, function () { $(this).css({'background-image':'url(img_2.jpg)'}); }); });` Ou si tu préfères gérer les comportement CSS hors du javascript : `jQuery(function ($) { // Un élément avec un comportement bien distinct $("#zone_accueil").hover( function () { $(this).addClass('zone_accueil_hover'); }, function () { $(this).removeClass('zone_accueil_hover'); }); // et un autre élément avec un autre comportement $("#zone_2").hover( function () { $(this).addClass('zone_2_hover'); }, function () { $(this).removeClass('zone_2_hover'); }); });` Du coup, on pourrait simplifier grandement. On part du principe que chaque élément auquel tu souhaites apporter un comportement possède la classe ".lien" : `jQuery(function($){ $(".lien").hover( function () { // On va récupérer l'id identifiant=$(this).attr('id'); // Et on lui assigne une classe supplémentaire pour le comportement en survol $(this).addClass(identifiant+'_hover'); }, function () { // On retire cette classe supplémentaire en mouseOut $(this).removeClass(identifiant+'_hover'); } ); });` Modifié par ZeB_panam (21 Mar 2010 - 11:06)
253 Posts