jQuery curseur souris pour afficher les div et de montrer div si seulement la souris toujours au-dessus de la div

J'ai un problème avec mon mouseover et mouseout fonctions. Quand je survol d'un lien, il montre une face cachée de <div>, et quand je mouseout de la div il cache la div. Le problème est que si je survol d'un lien, puis-je passer de la souris quelque part d'autre qui n'est pas sur la div, la div ne va pas loin.

Si j'utilise le mouseout cas de le lien pour définir la visibilité de la div, alors je ne vais pas être en mesure de planer sur la div.

Voici mon code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });

                $("#hello").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });
                $("#hello").mouseout(function() {
                    $("#hello").css('visibility', 'hidden');
                });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <a id="show_div" href="#">Link text</a>
        <div id="hello" style="visibility:hidden;">
            <ul>
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>    
</html>

Voulez-vous la div à fait occuper l'espace dans la page caché ou apparaître plus-haut de la page, comme un <select> déroulante?
Je pense que la div doit apparaître sur la page. Peut-être, il peut définir des z-index pour cela.
Oui, je veux qu'elle apparaissent sur le dessus.

OriginalL'auteur Narazana | 2010-06-26

2

- Je utiliser un setTimeout fonction pour modifier la propriété css. Définir l'intervalle de la setTimeout à ~333-500 millisecondes, et de définir les infobulles pour les Div pour effacer le délai d'attente. Ensuite, sur le mouseout de la div en lui-même, de régler la minuterie de nouveau 🙂

Exemple/Réponse:
```
//timer for hiding the div
var hideTimer;

//show the DIV on mouse over
$("#show_div").mouseover(function() {
    //forget any hiding events in timer
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

$("#hello").mouseover(function() {
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

//set a timer to hide the DIV
$("#show_div").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

$("#hello").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

//hides the DIV
function hideHello() {
    $("#hello").css('visibility', 'hidden');
}
```
Pouvez-vous me montrer un échantillon? Je suis un newbie.
J'ai editted ma réponse à vous fournir le code source. Je ne suis pas 100% sur le jQuery portions car je l'utilise directement en javascript, mais le droit en javascript devrait fonctionner 🙂 Si vous avez des questions à ce sujet, je serai plus qu'heureux de répondre pour vous.
abelito - L'OP a le code s'exécutant à l'intérieur de jQuery ready() fonction, alors vous devriez peut-être signaler que hideHello() aurez besoin d'être dans l'espace de noms global, ou vous aurez besoin de changer la setTimeout() fonctions pour recevoir la référence locale pour hideHello
Jamais, jamais, jamais, jamais passer d'une chaîne à setTimeout(), vous pouvez le faire setTimeout(hideHello, 333 ); directement, qui est à la fois plus rapide et b) élimine beaucoup effets secondaires, exactement comme @patrick est en train de parler.
Craver - Dûment noté, merci les gars pour la connaissance. J'ai changé le code ci-dessus pour utiliser hideHello .

OriginalL'auteur abelito
2

Place le tout dans un récipient et mettre les événements de la souris:

L'essayer: http://jsfiddle.net/hGTPp/

HTML
```
<div id='container'>
    <a id="show_div" href="#">Link text</a>
    <div id="hello" style="visibility:hidden;">
        <ul>
            <li>
                Coffee
            </li>
            <li>
                Tea
            </li>
            <li>
                Milk
            </li>
        </ul>
    </div>
</div>
```
jQuery
```
$("#container").mouseover(function() {
    $("#hello").css('visibility', 'visible');
});
$("#container").mouseout(function() {
    $("#hello").css('visibility', 'hidden');
});
```
+1 - C'est le chemin que je prendrais, à moins que display:none; était une option, dans ce cas, vous pouvez simplifier encore plus: jsfiddle.net/hGTPp/2
serait plus agréable si possible.
Ne savez pas quelle différence cela ferait juste parce que le div est ajoutée dynamiquement, mais de toute façon je n'ai pas vraiment eu de problème-je revenir en arrière à l'original de votre code, et il suffit d'ajouter une mouseout à show_div. jsfiddle.net/SuqxY
. il ne fonctionne pas ici. Je suis sûr de savoir pourquoi cela fonctionne @ jsfiddle.net/SuqxY
Qui a probablement à voir avec votre mise en page CSS. Si il y a une marge appliquée peut-être. Est-il une raison pour laquelle vous ne pouvez pas envelopper la <a> et <div> dans un récipient comme je l'ai fait dans ma réponse ci-dessus?

OriginalL'auteur user113716

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").hover(
                  function(){
                    $('#hello').show();
                  },
                  function(){
                    $('#hello').hide();
                  });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="show_div">
            <a href="#">Link text</a>
            <ul id="hello" style="display:none;">
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>

</html>

OriginalL'auteur codez

0

Utilisation .hover() à la place. Il vous permet de spécifier handlerIn et handlerOut événements. E. g.

jQuery
```
<script type="text/javascript">
  $(document).ready(function() {
    $("#linkdiv").hover(function() {
      $("#hello").show();
    }, function() {
      $("#hello").hide();
    });
  });
</script>
```
HTML
```
<div id="linkdiv">
  <a id="show_div" href="#">Link text</a>

  <div id="hello" style="display: none;">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </div>
</div>
```
Edit: Modifié un peu le code d'après Nick commentaire. Merci Nick.

En fait ils sont mouseenter et mouseleave événements...mais le <div> n'est pas un enfants de la <a>, donc cela ne marchera pas.
Comme Nick l'a indiqué, pour faire ce travail, vous avez besoin d'avoir à la fois dans un conteneur. Vous pouvez toujours brancher le gestionnaire d'événement à droite après le DIV a été ajouté.

OriginalL'auteur Gert Grenander

CSS solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    #link{
      display:inline-block;
      overflow:hidden;
      height:20px;
    }
    #link:hover{
      height:auto;           
    }
  </style>
</head>
<body>
  <br />
  <div id="link">
    <a href="#">Link text</a>
    <ul>
      <li>
          Coffee
      </li>
      <li>
          Tea
      </li>
      <li>
          Milk
      </li>
    </ul>
  </div>
</body>
</html>

OriginalL'auteur codez

$(document).ready(function()
{
    var timer;
    $("#show_div").hover(
        function ()
        {
            $('#hello').show();
        },
        function()
        {
            timer = setTimeout(function(){$('#hello').hide();}, 5000);
        }
    );

    $("#hello").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#hello').show();
        }
    );
}

OriginalL'auteur Ramesh

Vous devez vous connecter pour publier un commentaire.