Discussion :

[Romain_marine]

Bonjours

j'ai un petit soucis avec les "fonctions" mouseover et mouseout sur un Div contenant 2 balises a... voici un exemple simplifié de ce que je veux faire (ne faites pas attention a l'exactitude du code):

Code :

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

1
2
3
4
5
 
<div class="classDiv" onMouseOver="style.backroundColor='red'" onMouseOut="style.backroundColor='white'>
    <a href="URL">nom lien 1</a>
    <a href="URL">nom lien 2</a>
<div>

sachant que dans mon CSS j'ai

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.classDiv {
    text-align:center;
    border-color: orange;
    border-width: 1px;
}
 
.classDiv a{
    color: orange;
    text-decoration: none;
}
 
.classDiv a:hover{
    color: black;
    text-decoration: underline;
}

donc au final ce que j'attend à avoir est la chose suivante:

quand le curseur de la souri passe sur le DIV le fond devient rouge :

Code :

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

onMouseOver="style.backroundColor='red

et quand je le quitte il devient Blanc.

Code :

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

onMouseOut="style.backroundColor='white'

Et quand je passe sur l'un des liens à l'intérieur du DIV, le fond reste donc rouge mais le lien
, qui au départ est orange non souligné

Code :

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

1
2
3
4
.classDiv a{
    color: orange;
    text-decoration: none;
}

,devient noir et surligné

Code :

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

1
2
3
4
.classDiv a:hover{
    color: black;
    text-decoration: underline;
}

mon problème et le suivant :
lorsque je rentre dans le div, le fond change bien de couleur,
lorsque je passe sur le premier lien c'est tjs bon (soulignement + couleur noir)

MAIS lorsque je quitte le premier lien pour aller sur le 2nd SANS QUITTER LE DIV..!!!..... le onMouseOut du DIV est "actionné" du coup je repasse sur un fond blanc dans mon div alors que je suis encore dedans.

j'ai l'impression que le code est mal interprété
il tombe sur une balise fermante (celle du lien en l'occurrence) et actionne le Mouseout ou lieu de l'actionner sur la balise fermante du DIV...

que puis-je faire please.......

[NoSmoking]

Bonjour, et merci
merci parce que je ne savais pas qu'un tel code puisse fonctionner

(ne faites pas attention a l'exactitude du code):

et pourtant c'est la que cela pèche

Code :

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

<div class="classDiv" onMouseOver="style.backroundColor='red'" onMouseOut="style.backroundColor='white'>

- manque un " de fermeture de la chaine après 'white'.
- backroundColor n'est pas une propriété du CSS mais backgroundColor OUI

au final

Code :

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

1
2
3
4
<div class="classDiv" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">
    <a href="URL">nom lien 1</a>
    <a href="URL">nom lien 2</a>
<div>

devrait fonctionner

Nota:
- j'ai ajouté this devant le style pour être sûr que c'est la DIV qui est concernée, c'est le merci car cela fonctionne sans
- j'ai passé les événements en minuscule

[Romain_marine]

OK merci pour ta réponse...

maintenant j'aimerai modifier la partie JS

à savoir au lieu de modifier la couleur de backGound,
j'aimerai que lorsque je sort du DIV, il s'efface...
j'ai pensé mettre le code suivant :

Code :

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

1
2
3
4
5
 
<div class="classDiv" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.display='none';">
    <a href="URL">nom lien 1</a>
    <a href="URL">nom lien 2</a>
</div>

et dans ce cas là il se passe ce que je disais dans mon précédent message à savoir que lorsque je rentre dans le DIV le fond devient bien rouge, lorsque je passe sur le 1er lien il se souligne mais dès que je quitte ce lien le DIV s'efface alors que j'aurais bien aimé avoir la possibilité d'allé sur mon 2nd lien....

[NoSmoking]

j'aimerai que lorsque je sort du DIV, il s'efface...

mais comment fera tu pour le faire réapparaître?
Le comportement que tu observes est le comportement normal de diffusion des événements, je pense qu'il faut que tu changes ton approche du problème.

Tu pourrais y arriver en gérant un timer sur la disparition de la DIV que tu annulerais au passage sur les liens, mais bon!

[Bovino]

Sinon, il faut utiliser l'objet event pour déterminer le relatedTarget ou fromElement et savoir si tu es réellement sorti de la div.