11548 sujets

JavaScript, DOM et API Web HTML5

Onmouseover sur un <li> problème avec IE

Salut,

J'utilise jquery pour faire un petit truc sympathique Smiley lol . Mais maintenant j'ai un petit problème avec IE. J'utilise quelque chose comme ça
<ul>
  <li><a><img /></a></li>
  <li><a><img /></a></li>
</ul>
J'ai un évènement onmouseover/onmouseout sur le <li> pour faire apparaître/disparaître le lien. Le seul problème c'est que sous IE rien n'apparaît. Si j'ajoute un texte quelconque du genre
<li>aaa<a><img /></a></li>
évidemment le lien apparaît.
Si je mets l'évènement sur le <li> et non <a> c'est juste pour une question d'ergonomie, pour élargir la zone cliquable.

Donc auriez-vous un truc pour que le lien apparaisse?

PS: je ne suis pas sûr que ce forum soit le plus adéquat pour ce message...
Modérateur
Salut,

Peux-tu indiquer ton code JS ? Sans, il est impossible de repérer ton erreur. Smiley cligne

a écrit :
Si je mets l'évènement sur le <li> et non <a> c'est juste pour une question d'ergonomie, pour élargir la zone cliquable.
Tu peux élargir la zone cliquable via CSS en mettant un padding ou un display: block sur tes liens.
Les liens disparaissent/apparaissent et se trouvent donc avec un display:none; je ne peux donc pas les survoler. Les liens sont d'ailleurs invisibles à l'initialisation. Voilà le code généré via jquery
<ul style="margin: 0pt; padding: 0pt; list-style-type: none; width: 600px; position: relative; top: -50px; bottom: auto;">
    <li style="margin: 0pt; padding: 0pt; float: left; width: 300px; height: 50px;" id="__MainLiLeft">
        <a style="padding: 0pt; display: none;" id="__MainLeft">
            <img src="img/MainLeft.png">
        </a>
    </li>
    <li style="margin: 0pt; padding: 0pt; float: left; width: 300px; height: 50px;" id="__MainLiRight">
        <a style="margin: 0pt 0pt 0pt 250px; padding: 0pt; display: none;" id="__MainRight">
            <img src="img/MainRight.png">
        </a>
    </li>
</ul>
code javascript (jquery) suffisant pour comprendre je pense
$("#__Main > img")
		.after("<ul></ul>");
		
		$("#__Main > ul")
		.prepend("<a id=__MainLeft><img src='img/MainLeft.png'></a>")
		.append("<a id=__MainRight><img src='img/MainRight.png'></a>")
		.css("list-style-type", "none")
		.css({margin: "0", padding: "0", width: lstObjPhoto[i].width, position: "relative", top: "-50px", bottom:"auto"});
		
		$("#__MainLeft")
		.wrap("<li id=__MainLiLeft></li>")
		.css({display: "none", padding: "0"});
		
		$("#__MainRight")
		.wrap("<li id=__MainLiRight></li>")
		.css({display: "none", padding: "0"});
		
		$("#__MainLiLeft")
		.css({margin: "0", padding: "0", float: "left", width: (lstObjPhoto[i].width / 2), height: "50px"})
		.mouseover(function() {$("#__MainLeft").fadeIn("fast");})
		.mouseout(function() {$("#__MainLeft").fadeOut("fast");});
		
		$("#__MainLiRight")
		.css({margin: "0", padding: "0", float: "left", width: (lstObjPhoto[i].width / 2), height: "50px"})
		.mouseover(function() {$("#__MainRight").fadeIn("fast");})
		.mouseout(function() {$("#__MainRight").fadeOut("fast");});

[/i][/i][/i]
Modifié par bbp (12 Aug 2007 - 23:47)
Sujet clos
Aller à