J'ai le code suivant qui charge l'image d'arrière-plan lors de la navigation sur un texte, mais lorsque vous quittez le texte, l'image d'arrière-plan reste, plutôt que de revenir à la couleur de fond. Je ne vois aucune raison pour que cela ne déclenche pas.
4 Réponses :
Vous pouvez faire comme ça ....
p>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css({
"background-image":"url('https://cdn.pixabay.com/photo/2017/05/24/09/28/great-2339957_1280.jpg')",
"background-size":"cover",
"background-position":"center"
});
},
mouseleave: function(){
$(this).css({
"background-image": "",
"background-color": "red"
});
}
});
});
</script>
</head>
<body>
<p style="height:300px;width:300px;background-color:red;">this is my code.</p>
</body>
</html> Vous devez spécifier la valeur code> image code> pour le remplacer, fond-couleur code> est complètement un attribut CSS différent, voici un extrait de travail:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="rollover1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Comme les commentaires ont suggéré, sur Mouseleave, retirez l'image en le réglant à aucun et définissez une couleur d'arrière-plan.
Vous pouvez essayer le snippet ci-dessous. P>
P>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="rollover1"> <div id="container">Test</div> </div>
Vous n'avez dit nulle part où vous souhaitez supprimer l'image. Donc, si vous voulez supprimer l'image, vous devez l'indiquer explicitement.
jQuery('#rollover1').on('mouseenter', () => {
jQuery('#container').css('background-image', 'url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/157px-Google_%22G%22_Logo.svg.png")');
}).on('mouseleave', () => {
jQuery('#container').css('background-image','none').css('background-color', '#222222');
});
Vous devez supprimer l'image d'arrière-plan sur
mouseleave comme ceci:jQuery ('# conteneur'). CSS ("fond-image", "aucun");Sur
MOUSELERTERContexte-Image CSS est défini, mais il n'est pas supprimé surMouseleave . Vous voudrez peut-être l'enlever!