simple-hover
v1.0.0
Published
Une simple fonction pour gérer les événements hover entre éléments HTML.
Readme
SimpleHover
Une fonction JavaScript pour appliquer des effets de survol entre des éléments HTML grâce à des attributs personnalisés.
Installation
1. Téléchargement via npm
Installez-le via npm (ou incluez-le comme module local dans votre projet) :
npm install simple-hover1.1. Avec un module ES
Importez la fonction dans un fichier à partir de votre projet :
<script type="module">
import { simpleHover } from '../node_modules/simple-hover/index.js';
</script>1.2. Avec Bundler
Importez la fonction dans votre code :
import { simpleHover } from 'simple-hover';Utilisation
HTML
Ajoutez des attributs personnalisés hoverFrom et hoverTo à vos éléments HTML :
<div hoverFrom="example">Survolez-moi</div>
<div hoverTo="example">Je change de style au survol</div>CSS
Définissez un style pour les éléments ciblés lorsque le survol est actif :
[hoverTo] {
transition: all 0.2s ease;
}
.hoverto-example {
background-color: red;
color: white;
}Exemple complet
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>SimpleHover Exemple</title>
<style>
[hoverTo] {
transition: all 0.2s ease;
}
.hoverto-example {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div hoverFrom="example">Survolez-moi</div>
<div hoverTo="example">Je change de style au survol</div>
<script type="module" src="../node_modules/simple-hover/index.js"></script>
</body>
</html>Licence
Ce projet est sous licence MIT. Vous êtes libre de l'utiliser, de le modifier et de le redistribuer tant que vous conservez la licence d'origine.
Merci d'utiliser SimpleHover. Bon développement !