Simple-hover NPM

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-hover

1.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 !

hover DOM JavaScript

1.0.0

6 months ago