Maison > Article > interface Web > Introduction à l'utilisation du survol de jquery

Introduction à l'utilisation du survol de jquery

黄舟original: 2017-06-26 11:05:093807parcourir

Vue d'ensemble

Une méthode qui simule des événements de survol (la souris se déplace sur et hors d'un objet). Il s'agit d'une méthode personnalisée qui fournit un état « conserver » pour les tâches fréquemment utilisées.

Lorsque la souris passe sur un élément correspondant, la première fonction spécifiée sera déclenchée. Lorsque la souris quitte cet élément, la deuxième fonction spécifiée sera déclenchée. De plus, cela s'accompagnera d'une détection si la souris est toujours dans un élément spécifique (par exemple, une image dans un div). Si c'est le cas, elle continuera à rester dans l'état "survol" sans déclencher l'événement de déplacement. (Correction de l'utilisation de mouseout Une erreur courante pour les événements).

Paramètres

over, outFunction, FunctionV1.0

over : La fonction à déclencher lorsque la souris passe sur l'élément

out : La fonction à déclencher lorsque la souris sort de l'élément Fonction

outObjectV1.4

Fonction événementielle qui déclenche l'exécution lorsque la souris se déplace sur ou hors d'un élément

Exemple

over,out Description :

MouseoverTable plus une classe spécifique

jQuery Code :

$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

out Description :

La méthode hovre() change de méthode en liant la variable "handlerInOut".

Code jQuery :

$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);

$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

<style type="text/css">
.hover {background:red};
</style>

Le survol entre parenthèses dans addClass("hover") et removeClass("hover") ici ne doit être écrit qu'en survol, ou quelque chose du genre sinon. Non, ce n'est pas comme ça

La première réponse est oui, il n'est pas nécessaire de survoler.

Hover est écrit dans cette addClass car le nom du sélecteur de classe CSS précédent est hover (c'est-à-dire.hover {background:red};). Ce nom peut être changé en autre chose. Voici un code fonctionnel pour vous :

<html>
<head>
<title>hover demo</title>
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.myStyle {
    background: red
}
;
</style>
</head>
<body>
 
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
 
    <script>
        $("td").hover(function() {
            $(this).addClass("myStyle");
        }, function() {
            $(this).removeClass("myStyle");
        });
    </script>
 
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment jquery utilise-t-il undelegate pour supprimer les événements liés aux éléments créés dynamiquement à l'aide d'un délégué ?Article suivant：Comment jquery utilise-t-il undelegate pour supprimer les événements liés aux éléments créés dynamiquement à l'aide d'un délégué ?

Articles Liés

Voir plus