Jquery: Comment puis-je configurer un élément masqué à l'écran lorsqu'un autre élément qui est dans le champ?

J'essaie d'afficher une aide contextuelle à côté de champs de formulaire, qui n'est visible que lorsque ces champs sont mis au point ou planait au-dessus. J'ai essayé à l'aide d'une simple CSS, mais les résultats semblent très fragiles et contradictoires.

Voici mon CSS:

form .instruct {
    position: absolute;
    right: -220px;
    top: 10px;
    visibility: hidden;
    width: 200px;
    z-index: 1000;
}
form li:focus .instruct, form li:hover .instruct {
    visibility: visible;
}

Dans mon balisage, j'ai donné ma forme de la structure à l'aide d'une liste ordonnée, le groupement de chaque champ avec des instructions dans un li élément:

<form>
    <ol>
        [...]
        <li>
                <label for="message">Message</label>
                <textarea id="message" name="message"></textarea>
                <div class="instruct">
                    <p>Instructional text and <a href="#">Formating help.</a></p>
                </div>
        </li>
        [...]

Les instructions apparaissent à l'écran lorsque le curseur sur le champ, mais pas lorsque le champ est dans le champ-et si les déplacements de la souris pour sélectionner un lien dans le contexte des instructions, ils disparaissent.

Chaque domaine a ses propres instructions, et j'ai besoin de chacun d'apparaître lorsque le champ est dans le champ ou à l'état de pointage.

J'ai pensé que ce pourrait être un cas où jquery pourrait rendre la vie plus facile. Est-il un moyen rapide de faire cela? Si il y a un fiable façon de le faire à l'aide de matières CSS, je serais heureux avec cela aussi.

Merci!

vous voulez tous à afficher lors de votre textarea est au point?

OriginalL'auteur John Stephens | 2009-04-23

  1. 9

    Mis à jour avec le flou de l'événement pour vous

       $(function()
   {
        $('.instruct').hide(); //hide 
        $('#message').focus(function(){  
            $('.instruct').show(); //show
        }).blur(function(){  
            $('.instruct').hide(); //hide again
        });

  });
    Merci, c'est presque ce que j'ai besoin! Mais chaque domaine a ses propres instructions, regroupés dans un élément li. À l'aide de ce script permet de les dans de se concentrer quand #message est sélectionné. Est-il un moyen de le rendre plus générique, de sorte que lorsque chaque li est la mise au point ou de vol stationnaire, les instructions de dans qui li sont visibles? Ce script se débarrasse aussi de mon hover visibilité. Merci encore pour votre aide!
    Comment à propos de les cacher quand ils ne sont plus dans le foyer?
    pour cela, vous pouvez simplement identifier chaque instruction des noms uniques, dans cet exemple, unique les noms de classe et de suivre les mêmes critères et à la deuxième observation de l'effet de flou de l'événement n'est que
    Génial. Le seul problème que j'ai eu était que de l'utiliser .masquer le fait que l'instruction des liens unclickable, dès que vous cliquez en dehors du champ, même un lien, il a perdu le focus et a disparu. J'ai utilisé .fadeOut(1000) au lieu de les cacher et de les liens obtenu cliquable de nouveau. Merci pour votre aide!

    OriginalL'auteur TStamper

  2. 1

    Utiliser le focus événement.

    L'accent événement se déclenche quand un élément reçoit le focus soit via le périphérique de pointage ou par l'onglet de navigation.

    Merci-- qui ressemble à ce dont j'ai besoin, mais mon javascript capacités sont à peine au Padawan. J'ai une solide connaissance de XHTML & CSS, javascript, mais est de la magie pour moi.

    OriginalL'auteur eKek0

  3. 0

    J'ai trouvé le jQuery toggle() à la solution, je me disais que j'aurais utilisé.

    http://docs.jquery.com/Effects/toggle

    OriginalL'auteur