From ae1c78da168923d0f062671d8cb5871d94725e26 Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Fri, 17 Jul 2020 11:11:53 +0200 Subject: [PATCH] Add hover --- README.md | 88 ++++++++++++++++++++++++++++++++--------------- dist/ffnm.min.js | 2 +- src/core.js | 54 ++++++++++++++++++++++++++++- test/i-hover.html | 31 +++++++++++++++++ 4 files changed, 145 insertions(+), 30 deletions(-) create mode 100644 test/i-hover.html diff --git a/README.md b/README.md index 384a84e..ee823b0 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,19 @@ # FFNM (Front-End for the next master) -Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **1,7 Kb**! +Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2Kb**! Simplifies the click -![Self click](media/self-click.png) - -

- πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡ -

- -![Self clicked](media/self-clicked.png) - Modify others - -![Other click](media/other-click.png) - -

- πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡ -

- -![Other clicked](media/other-clicked.png) Simplifies the scroll -![Other click](media/scroll.png) - -

- πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡ -

- Scroll up -![Other clicked](media/scroll-up.png) - Scroll down -![Other clicked](media/scroll-down.png) +Simplifies Hover + ## DEMOS @@ -56,7 +33,7 @@ Scroll down Add to your `` the following tag. ```html - + ``` ### Examples @@ -130,6 +107,34 @@ Add to your `` the following tag. ``` +#### Hover + +##### Add the class `show` to `div` when hover. + +```html +
+``` + +##### Remove the `show` class from `div` when hover. + +```html +
+``` + +##### Toggle the `show` class from `div` when hover. + +```html +
+``` + +##### Add the class `show` to `#button` when `div` hover. + +```html +
+