jQuery mouseover lien pour afficher les div

Je suis tombé sur l'événement mouseover sur extratorrent site comme sur l'image suivante.

le texte d'alt http://img3.imageshack.us/img3/4516/usercommment999.jpg

Lorsque vous placez le pointeur de la souris sur le nom d'utilisateur de lien, il affiche un div caché. Assez propre et lisse.

Je suis nouveau sur jQuery.Quelqu'un peut-il me montrer comment démarrer sur la bonne voie pour le faire? Merci.

Mise à jour 1:

J'ai écrit quelque chose comme ce qui suit tente d'obtenir le résultat. Le problème est que quand je souris la souris sur le lien de la Div ne restera pas, il disparaît immédiatement.

<!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'); });
    $("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); });


        });
        </script>

    </head>

    <body>

    <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>


    </body>
    </html>

Quoi faire pour faire de Div rester visible lorsque la souris au-dessus de la Div?

OriginalL'auteur Narazana | 2010-06-26

12

Lors du passage de la souris le texte du Lien, vous définissez la Visiblility de la div "bonjour" visible". Puis passage de la souris sur la div "bonjour", vous pouvez aussi choisir div "bonjour" visibilité "visible". Sur mouseout de la div "bonjour", vous définissez la visibilité de "caché". Quelque chose comme ceci:
```
$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });
```
Donc, il faut 3 étapes..Merci.
J'avais besoin de mettre en place quelque chose comme ça, et ajouté un mouseout #show_div. $("#show_div").mouseout(function() { $("#bonjour").retard("fast").css('visibilité','hidden');}); L'idée était que les éléments de la liste devraient disparaître après un délai, mais cela ne fonctionne pas. Si je prends le retard, les éléments de la liste en aller dès que la souris se déplace loin de le lien. Avec du retard, les éléments de la liste ne jamais s'en aller. Aucune idée pourquoi? Merci!!!
J'ai regardé cela d'un peu plus et il s'avère que, pour le faire fonctionner, j'ai besoin de faire: $("#show_div").mouseout(function() { setTimeout(function () {$("#bonjour").css('visibilité','hidden');}, 200); });

OriginalL'auteur Angkor Wat
3

Vous pouvez utiliser le .survolez fonction:
```
$(function() {
    $('#divOne').hover(function() { 
        $('#divTwo').show(); 
    }, function() { 
        $('#divTwo').hide(); 
    });
});
```
où vous avez les deux divs:
```
<div id="divOne">div one</div>
<div id="divTwo" style="display: none;">div two</div>
```
Mise à JOUR:

Comme mentionné dans la section des commentaires de la deuxième div disparaîtra si la souris sort de la première. Il y a de nombreux plugins là qui vous permettra d'obtenir le comportement souhaité. Cette une semble particulièrement agréable.

Le problème est que si l'utilisateur déplace la souris dans l'fraîchement montré divTwo, il va disparaître sous eux que la souris quitte divOne. Pas un idéal UX.
Crowder, très bonne remarque.
Le downvote semble grave...
Veuillez voir la mise à Jour de 1 dans la question.
Veuillez voir la mise à Jour de 1 dans la réponse.

OriginalL'auteur Darin Dimitrov
0

Avec un simple code HTML:
```
<div class="div1">Hover me</div>
<div class="div2" style="display: none">Hi, there</div>
```
Lors du passage sur div1 vous montrer div2, et de le cacher seulement après que l'utilisateur d'obtenir à l'intérieur et ensuite de sortie:
```
<script type="text/javascript">
$('.div1').hover(function() {$('.div2').show()});
$('.div2').hover(function() {}, function() {$('.div2').hide()});    
</script>
```
C'est un moyen rapide, non solution optimale, mais même si les deux divs ne sont pas adjacentes.

OriginalL'auteur Iacopo
0

UTILISER CETTE

$(document).on("click","#test-élément",function() {});

OriginalL'auteur Burak Durmuş

Vous devez vous connecter pour publier un commentaire.