div hover visibility hidden/visible cliniote ??

adrienanorm
Les bases HTML/CSS

Bonjour a tous,

j'ai 2 div superposé ayant les memes propriétés, je souhaiterai que la 1ere visible se masque pour laisser apparaitre l'autre au survol.
quand je fais un #footer:hover { visibility:hidden} sa marche partielement car quand je déplace ma souris sur la div elle se masque et démasque par alternance / cliniote ...
une idée?
j'ai essayer en jquery et j'ai eu le meme résultat

#footer {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    position:fixed;
    bottom:0px;
    height:70px;
    width:100%;
    background-color:#fff;
    z-index:10;
    }

<script type="text/javascript">
$('#footer').mouseover(function() {
    $(this).hide();
});
$('#footer').mouseout(function() {
    $(this).show();
});
</script>

( je n'ai pas réussi a utiliser if pour faire moins long :) )

3 réponses

MrGuillou
Réponse acceptée

Bonsoir, normal car quand tu la hide elle disparaît donc jquery exécute mouseout. Car la souris sort bien de l'élément.

Pour éviter le problème, il faut que le mouseout soit sur le 2èeme élément.

Enfin avec la structure de ton html, ça serait plus simple pour nous de t'aider.

djtec
Réponse acceptée

Pour faire plus court tu peux enchainer 2 fonction à la suite comme ça là 2ème fonction se lancera comme ton mouseout et peut-être que en mettant stop avant l'animation ça résoudra le problème.

adrienanorm
Auteur

ok merci a vous 2, il fallait tourner le jquery d'une autre manière, de cette facon ca marche:

<script type="text/javascript">
$('#footer').mouseover(function() {
    $(this).hide();
});

$('#footer2').mouseout(function() {
    $('#footer').show();
});
</script>