Introduction à l'utilisation du survol de jquery-js tutoriel-php.cn

Introduction à l'utilisation du survol de jquery

黄舟

Libérer： 2017-06-26 11:05:09

original

3844 Les gens l'ont consulté

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"); } );

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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>

Copier après la connexion

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!