Discussion :

[Gueuz]

Bonjour à tous.

Imaginez deux 'boîtes', deux div, ou une section dans une li.

Au survol de ses boites imbriquer j'aimerais activer un bout de code (mouseover). Ok, pour le moment je n'ai aucun problème avec ça.

Par contre, le sujet de ma question est que j'aimerais uniquement activer ce script au survol de la boite 'conteneur' et non pas celle 'contenu'.

En gros, j'ai une grosse boite qui en contient une plus petite. Au survol de la souris, j'aimerais que ce soit actif uniquement quand on passe sur la grosse et non sur la petite. M'avez-vous compris ?

Comment dois-je faire ?

Merci pour votre aide.

[sekaijin]

Bonjour à tous.

Imaginez deux 'boîtes', deux div, ou une section dans une li.

Au survol de ses boites imbriquer j'aimerais activer un bout de code (mouseover). Ok, pour le moment je n'ai aucun problème avec ça.

Par contre, le sujet de ma question est que j'aimerais uniquement activer ce script au survol de la boite 'conteneur' et non pas celle 'contenu'.

En gros, j'ai une grosse boite qui en contient une plus petite. Au survol de la souris, j'aimerais que ce soit actif uniquement quand on passe sur la grosse et non sur la petite. M'avez-vous compris ?

Non

Comment dois-je faire ?

Merci pour votre aide.

mouseover mouseout sont des événements
le code est donc actif à au moment de l'événement
le code n'est pas actif pendant le temps que la souris reste dans la boite.

le code onmouseover est actif lorsque la souris entre
le code onmouseout est actif lorsque la souris sort

le code ne peux donc pas être actif lorsqu'on passe sur la grosse et non sur la petite
la seule chose que tu peux faire est réagir aux l'événements d'entrée et de sortie des deux boites.

entrée dans la grosse boite, (la souri est dans la grosse, hors de la petite)
entrée dans la petite, (la souri est dans la grosse, dans de la petite)
sortie de la petite, (la souri est dans la grosse, hors de la petite)
sortie de la grosse. (la souri est hors la grosse, hors de la petite)


A+JYT

[SylvainPV]

Oui c'est possible, en vérifiant event.target.

Un exemple ici : http://jsfiddle.net/d62CF/

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="conteneur">
    <div id="contenu">
        test
    </div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
document.getElementById("conteneur").onmouseover = function(event){
    if(event.target.id === "contenu"){
        log("onmouse over à l'intérieur de contenu");
    } else {
        log("onmouse over à l'intérieur de conteneur mais à l'extérieur de contenu");
    }
}

[Gueuz]

C'est exactement ça. Par contre je fonctionne avec jQuery et je n'arrive pas à transposer la même chose. Est-ce que tu pourrais me dire comment faire ?

Merci.

[SylvainPV]

Dans ce cas tu aurais pu poster en section jQuery. Enfin, ça ne change pas grand chose...

http://jsfiddle.net/d62CF/1/

[Gueuz]

Je l'ai pas mis dans la section jQuery car je voulais (et pensais) rester général.

Bon, par contre, je t'ai dis que je n'arrivais pas à transposer ton code en jQuery mais finalement je pense que oui.

En tout cas, j'ai un gros soucis avec ça donc je te passe le lien de la page où j'ai le problème car ça ne fonctionne toujours pas. Même après la condition.

ici

Merci en dans tous les cas pour l'aide apporté.

EDIT : C'est les zones orange qui apparaissent quand tu passes sur le li mais j'aimerais que ce soit QUE sur le li. Pas dans les blocs 'section'.

[SylvainPV]

Ici on ne débugge pas à ta place, on répond aux questions.
Je ne sais pas où se trouve tes sources ni quel comportement tu souhaites exactement.

[Gueuz]

Non, non, c'est pas se que je demande. Mais pour le coup, je bloque complet.
Mon code est tout à la fin du JS.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$('li').mouseover(function(e) {
		if(e.currentTarget.localName == 'li') {
			$(this).css({
				'backgroundColor': 'rgba(248, 148, 29, .6)'
			});
		}
	}).mouseleave(function(e) {
		console.log(e);
		$(this).css({
			'backgroundColor': ''
		});
	});

Et pour la structure HTML c'est des li qui contiennent des sections.

[SylvainPV]

Forcément si tu ne reprends pas le code qu'on te donne... Dans ma réponse c'est event.target, et non event.currentTarget

[Gueuz]

Oui, en l'occurrence event.target.localName. Désolé, il y'a tellement d'informations dans le évent que je me suis un peu pommé.

Ca fonctionne, merci pour ton aide.

[Gueuz]

Je remonte mon fil car je n'avais pas vu un élément disgracieux.

Quand on déplace la souris un peu trop vite, après avoir 'attrapé' la zone orange (autrement dis, lors d'un drag), la couleur orange disparaît. effectivement, le jQuery prévois de le faire disparaitre lors d'un mouseleave.

J'aimerais gardé cette action mais lors du déplacement de la souris, éviter que cela disparaisse.

Quelqu'un aurait il une idée ?

Merci.