Maison > Article > interface Web > Introduction à l'utilisation du survol de jquery
Introduction à l'utilisation du survol de jquery
- 黄舟original
- 2017-06-26 11:05:093757parcourir
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!