Use :hover for .hover

Author: yuanchuan

src/generator/css.js

@@ -57,7 +57,6 @@ class Rules {
     this.reset();
     this.custom_properties = {};
     this.uniforms = {};
-    this.hover = false;
     this.content = {};
   }
 
@@ -670,9 +669,6 @@ class Rules {
           let name = token.name.substr(1);
           let fn = Selector[name];
           if (fn) {
-            if (name === 'hover') {
-              this.hover = true;
-            }
             let args = token.arguments.map(arg => {
               return this.compose_argument(arg, coords);
             });
@@ -784,7 +780,6 @@ class Rules {
       pattern: this.pattern,
       uniforms: this.uniforms,
       content: this.content,
-      hover: this.hover,
     }
   }
 

src/index.js

@@ -55,7 +55,6 @@ if (typeof customElements !== 'undefined') {
         animation.cancel();
       }
       this.animations = [];
-      this.remove_hover();
       this.remove_uniform_mouse();
     }
 
@@ -405,7 +404,7 @@ if (typeof customElements !== 'undefined') {
       let style_container = get_grid_styles(grid) + host + container;
       let style_cells = has_delay ? '' : cells;
 
-      const { uniforms, content, hover } = compiled;
+      const { uniforms, content } = compiled;
 
       let replace = this.replace(compiled);
 
@@ -428,11 +427,6 @@ if (typeof customElements !== 'undefined') {
         this.set_content('.style-cells', replace(cells));
       }
 
-      if (hover) {
-        this.register_hover();
-      } else {
-        this.remove_hover();
-      }
       if (uniforms.time) {
         this.register_uniform_time();
       }
@@ -448,35 +442,6 @@ if (typeof customElements !== 'undefined') {
       }
     }
 
-    register_hover() {
-      if (!this.hover_callback) {
-        this.hover_callback = e => {
-          e.target.classList.add('hover');
-          this.hovered_element = e.target;
-        }
-      }
-      if (!this.hover_out_callback) {
-        this.hover_out_callback = e => {
-          if (this.hovered_element) {
-            this.hovered_element.classList.remove('hover');
-          }
-        }
-      }
-      this.doodle.addEventListener('pointerover', this.hover_callback);
-      this.doodle.addEventListener('pointerout', this.hover_out_callback);
-    }
-
-    remove_hover() {
-      if (this.hover_callback) {
-        this.doodle.removeEventListener('pointerover', this.hover_callback);
-        this.doodle.removeEventListener('pointerout', this.hover_out_callback);
-        let el = this.doodle.querySelector('.hover');
-        if (el) {
-          el.classList.remove('hover');
-        }
-      }
-    }
-
     register_uniform_mouse(uniforms) {
       if (!this.uniform_mouse_callback) {
         let { uniform_mousex, uniform_mousey } = Uniforms;

src/selector.js

@@ -19,13 +19,13 @@ function nth(input, curr, max) {
 function get_selector(offset) {
   let selector = '';
   if (offset == 0) {
-    selector = '$.hover';
+    selector = '$:hover';
   }
   else if (offset > 0) {
-    selector = `$.hover ${'+*'.repeat(offset)}`;
+    selector = `$:hover ${'+*'.repeat(offset)}`;
   }
   else {
-    selector = `:has(+ ${'*+'.repeat(Math.abs(offset + 1))} $.hover)`;
+    selector = `:has(+ ${'*+'.repeat(Math.abs(offset + 1))} $:hover)`;
   }
   return selector;
 }