11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery - Bloc qui perd le survol quand parcours d'un <sel

Bonjour,
Désolé pour le titre plutôt obscur.
Il s'agit en fait d'un effet de style réalisé avec jQuery, mais qui ne fonctionne pas comme il devrait (= comme s'il était fait en CSS). Mais je ne vois pas comment le réaliser en css...

Structure du document (XHTML) :

<ul id="taches">
	<li id="tache0">
		<a href="Debiter"><em>Débiter</em> un compte</a>
		<div class="tache">
			<form action="" method="post">
				<input type="hidden" name="tache" value="Debiter" />
				<p>
					<label for="d_nom">Nom : </label><input type="text" name="nom" id="d_nom" class="compte" />
				</p>
				<p>
					<label for="d_conso">Consommation : </label>
					<select name="conso" id="d_conso">
					<option value="1">Kro pression (50.00 cl) - 2.00 €</option>
<option value="2">Kro pression (25.00 cl) - 1.00 €</option>
					</select>
				</p>
				<input type="submit" value="Débiter" />
			</form>

		</div>
	</li>
	<li id="tache1">
		<a href="Crediter"><em>Créditer</em> un compte</a>
		<div class="tache">
			<form action="" method="post">
				<input type="hidden" name="tache" value="Crediter" />
				<p>
					<label for="c_nom">Nom : </label><input type="text" name="nom" id="c_nom" class="compte" />
				</p>
				<p>
					<label for="c_montant">Montant : </label><input type="text" name="montant" id="c_montant" />
				</p>
				<p>
					<input type="radio" value="0" id="c_forme_0" name="forme" checked="checked" /><label for="c_forme_0">Liquide</label>
					<input type="radio" value="1" id="c_forme_1" name="forme" /><label for="c_forme_1">Chèque</label>
				</p>
				<input type="submit" value="Créditer" />
			</form>

		</div>
	</li>
</ul>

(il s'agit du système de gestion d'un bar...)

L'utilisateur peut réaliser différentes actions, qui sont les différents éléments <li> d'une liste <ul>.
Une action réalisables est constituée d'un lien, et de l'action elle-même.
De base (quand l'action n'est pas survolée), seul le lien est affiché : le morceau <div class="tache"> est caché. Lors du survol, le lien se cache et le morceau <div class="tache"> apparaît. Pour cela, j'utilise jQuery. Voici les codes CSS et Javascript :

Le code CSS ne me semble pas capital, mais je le donne quand même.
ul#taches {
	list-style-type: none;
	padding: 0 200px;
}

ul#taches>li {
	min-height: 100px;
	border: 1px solid black;
	width: 600px;
	margin: 10px auto;
	padding: 15px;
	border-radius: 20px/ 15px;
	-webkit-border-radius: 20px/ 15px;
	-moz-border-radius: 20px/ 15px;
}


	$("ul#taches > li").hover(function () {
		$(this).children("a").fadeOut("fast", function() {
			$(this).next().fadeIn("fast")});
	},
	function () {
		$(this).children(".tache").fadeOut("fast", function () {
			$(this).prev().fadeIn("fast")});
	});


Le problème survient sur deux navigateurs : Internet Explorer et Mozilla Firefox (le bon fonctionnement a été vérifié sous Opera, Chrome et Safari).
Alors que le curseur est sur le premier bloc, quand on déroule le <select>, dès que le curseur passe sur un <option> (parmi ici deux), le <li> perd le survol (hover), et le morceau <div class="tache"> disparaît donc, ce qui est tout sauf pratique...

Mon message vous apparaît peut-être brouillon, je m'en excuse.
Merci d'avance.
Modifié par Laug (11 May 2010 - 19:05)
Bonjour,


C'est une différence de comportement, enfin on pourrait essayer de passer outre en remplaçant la méthode hover par un mouseenter et un mouseleave :

    $("ul#taches > li").mouseenter(function () {
        $(this).children("a").fadeOut("fast", function() { 
            $(this).next().fadeIn("fast")
        }); 
    }).mouseleave(function (e) { 
        $(this).children(".tache").fadeOut("fast", function () { 
            $(this).prev().fadeIn("fast")
        });
    });

Et puis en ajoutant une ligne dans le mouseleave pour tester si l'objet qu'on souhaite atteindre est une balise option ou select :

    $("ul#taches > li").mouseenter(function () {
        $(this).children("a").fadeOut("fast", function() { 
            $(this).next().fadeIn("fast")
        }); 
    }).mouseleave(function (e) { 
        if(e.target.tagName!='SELECT' && e.target.tagName!='OPTION')
            $(this).children(".tache").fadeOut("fast", function () { 
                $(this).prev().fadeIn("fast")
            });
    });

Et cela semble fonctionner ^^

Normalement il n'y a pas besoin de s'occuper du mouseenter car on ne fait qu'y rendre visible quelque chose qui l'est et cacher quelque chose qui l'est aussi.

Sinon dans le cas d'un grand select qui dépasserait du bloc ( ce qui n'est pas le cas ), ça pourrait poser problème car on sortirait du select et en même temps du bloc sans avoir réalisé ce qu'on devait faire en sortant du bloc ( il faudrait donc tester si quand on sort du select on arrive en dehors du bloc dans lequel il se trouve, enfin ici il est petit donc ça va Smiley biggrin ).

Cordialement.
Modifié par Etana (11 May 2010 - 17:29)
Sujet clos
Aller à