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
-
-
-
- ππππππ
-
-
-
-
Modify others
-
-
-
-
- ππππππ
-
-
-
Simplifies the scroll
-
-
-
- ππππππ
-
-
Scroll up
-
-
Scroll down
-
+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.
+```
+
+##### 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
+
+Hi
+```
+
+
---
## Spanish/EspaΓ±ol
@@ -139,7 +144,7 @@ Add to your `` the following tag.
AΓ±ade a tu `` la siguiente etiqueta.
```html
-
+
```
### Ejemplos de uso
@@ -213,6 +218,33 @@ AΓ±ade a tu `` la siguiente etiqueta.
+```
+
+##### Quita la clase `show` al `div` cuando sea hover.
+
+```html
+
+```
+
+##### Intercambia la clase `show` al `div` cuando sea hover.
+
+```html
+
+```
+
+##### AΓ±ade la clase `show` a `#button` cuando `div` sea hover.
+
+```html
+
+Hi
+```
+
---
## Development
diff --git a/dist/ffnm.min.js b/dist/ffnm.min.js
index ecf90e4..d3259fa 100644
--- a/dist/ffnm.min.js
+++ b/dist/ffnm.min.js
@@ -1,2 +1,2 @@
-document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let c=[],t=void 0;function l(e,c){let t=e.getAttribute(c),l=RegExp("^(\\w+):").exec(t)[1],s=RegExp(":(\\w+)\\(").exec(t)[1],a=RegExp("\\('(\\w+)',?").exec(t)[1],o=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)");return{functionParent:l,functionChild:s,value:a,target:null!==o.exec(t)?o.exec(t)[1]:void 0}}c=[],["i-click","i-scroll-up","i-scroll-down"].map(t=>[...document.querySelectorAll(`[${t}]`)].map(l=>{let s=Object.keys(e).map(c=>e[c].map(e=>RegExp(`^${c}:${e}\\('\\w+'(, *'[#,.,a-zA-Z]\\w*')?\\)$`).test(l.getAttribute(t))).some(e=>e)).every(e=>e);return s?c.push(l):(console.error("FFNM: Bad syntax"),console.error(l)),s}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let c=l(e,"i-click");switch(c.functionParent){case"class":[...document.querySelectorAll(c.target)].concat(e).forEach(t=>{e.addEventListener("click",()=>{switch(c.functionChild){case"add":t.classList.add(c.value);break;case"remove":t.classList.remove(c.value);break;case"toggle":t.classList.toggle(c.value)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset||document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(c=>{if(e>t){let e=l(c,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(c=>{if(e<=t){let e=l(c,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":c.classList.add(e.value);break;case"remove":c.classList.remove(e.value)}}}}),t=e<=0?0:e},!1)});
+document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],c=void 0;function s(e,t){let c=e.getAttribute(t),s=RegExp("^(\\w+):").exec(c)[1],a=RegExp(":(\\w+)\\(").exec(c)[1],l=RegExp("\\('(\\w+)',?").exec(c)[1],o=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)");return{functionParent:s,functionChild:a,value:l,target:null!==o.exec(c)?o.exec(c)[1]:void 0}}t=[],["i-click","i-scroll-up","i-scroll-down","i-hover"].map(c=>[...document.querySelectorAll(`[${c}]`)].map(s=>{let a=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('\\w+'(, *'[#,.,a-zA-Z]\\w*')?\\)$`).test(s.getAttribute(c))).some(e=>e)).every(e=>e);return a?t.push(s):(console.error("FFNM: Bad syntax"),console.error(s)),a}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let t=s(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(e).forEach(c=>{e.addEventListener("click",()=>{switch(t.functionChild){case"add":c.classList.add(t.value);break;case"remove":c.classList.remove(t.value);break;case"toggle":c.classList.toggle(t.value)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset||document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(t=>{if(e>c){let e=s(t,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(t=>{if(e<=c){let e=s(t,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}}),c=e<=0?0:e},!1),[...document.querySelectorAll("[i-hover]")].forEach(e=>{let t=s(e,"i-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(e).forEach(c=>{switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{c.classList.add(t.value)}),e.addEventListener("mouseout",()=>{c.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{c.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{c.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{c.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{c.classList.toggle(t.value)})}})}})});
//# sourceMappingURL=ffnm.min.js.map
diff --git a/src/core.js b/src/core.js
index 4ed557b..c5b0f36 100644
--- a/src/core.js
+++ b/src/core.js
@@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
//===
// VARIABLES
//===
- const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down'];
+ const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down', 'i-hover'];
const FUNCTION_TREE = {
'class': ['add', 'remove', 'toggle']
};
@@ -139,10 +139,62 @@ document.addEventListener('DOMContentLoaded', () => {
}, false);
}
+
+ /**
+ * Method add events i-hover
+ * return void
+ */
+ function addEventHover() {
+ let eventHover = 'i-hover';
+ return [...document.querySelectorAll(`[${eventHover}]`)].forEach((element) => {
+ let params = splitParams(element, eventHover);
+ switch(params.functionParent) {
+ case 'class':
+ [...document.querySelectorAll(params.target)].concat(element).forEach((item) => {
+ // Enter
+ switch(params.functionChild) {
+ case 'add':
+ // Enter
+ element.addEventListener('mouseenter', () => {
+ item.classList.add(params.value);
+ });
+ // Out
+ element.addEventListener('mouseout', () => {
+ item.classList.remove(params.value);
+ });
+ break;
+ case 'remove':
+ // Enter
+ element.addEventListener('mouseenter', () => {
+ item.classList.remove(params.value);
+ });
+ // Out
+ element.addEventListener('mouseout', () => {
+ item.classList.add(params.value);
+ });
+ break;
+ case 'toggle':
+ // Enter
+ element.addEventListener('mouseenter', () => {
+ item.classList.toggle(params.value);
+ });
+ // Out
+ element.addEventListener('mouseout', () => {
+ item.classList.toggle(params.value);
+ });
+ break;
+ }
+ });
+ break;
+ }
+ });
+ }
+
//===
// INIT
//===
validateSyntax();
addEventClick();
addEventScroll();
+ addEventHover();
});
diff --git a/test/i-hover.html b/test/i-hover.html
new file mode 100644
index 0000000..292c063
--- /dev/null
+++ b/test/i-hover.html
@@ -0,0 +1,31 @@
+
+
+
+ Test i-hover
+
+
+
+
+ Place the cursor over this text
+
+ Quisque id diam vel quam elementum pulvinar etiam non quam?
+
+
+ Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
+
+
+ Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras.
+
+
+ Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
+
+
+ Volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus mauris.
+
+
+