Hover spin buttons individually

examples/html/edit-style.css

@@ -284,7 +284,9 @@ input[type=number]::-webkit-inner-spin-button:after {
     content: "5";
     bottom: 6px;
 }
-input[type="number"]::-webkit-inner-spin-button:hover {
+
+input[type=number].hover-up::-webkit-inner-spin-button:before, 
+input[type=number].hover-down::-webkit-inner-spin-button:after {
     color: #ffffff;
 }
 

examples/html/entityList.html

@@ -14,6 +14,7 @@
     <script src="list.min.js"></script>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
+    <script type="text/javascript" src="spinButtons.js"></script>
     <script>
         var entities = {};
         var selectedEntities = [];
@@ -309,6 +310,8 @@
               resize();
           });
 
+          augmentSpinButtons();
+
           // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
           document.addEventListener("contextmenu", function (event) {
               event.preventDefault();

examples/html/entityProperties.html

@@ -17,6 +17,7 @@
     <script src="colpick.js"></script>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
+    <script type="text/javascript" src="spinButtons.js"></script>
     <script>
         var PI = 3.14159265358979;
         var DEGREES_TO_RADIANS = PI / 180.0;
@@ -1294,6 +1295,8 @@
                 elDropdowns = document.getElementsByTagName("select");
             }
 
+            augmentSpinButtons();
+
             // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
             document.addEventListener("contextmenu", function (event) {
                 event.preventDefault();

examples/html/gridControls.html

@@ -16,6 +16,7 @@
     <script src="colpick.js"></script>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="eventBridgeLoader.js"></script>
+    <script type="text/javascript" src="spinButtons.js"></script>
     <script>
         function loaded() {
             openEventBridge(function() {
@@ -134,8 +135,10 @@
                         $(el).colpickHide();
                         colorPickFunction(rgb.r, rgb.g, rgb.b);
                     }
-                })
-    
+                });
+
+                augmentSpinButtons();
+
                 EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
             });
 

examples/html/spinButtons.js

@@ -0,0 +1,51 @@
+//
+//  spinButtons.js
+//
+//  Created by David Rowe on 20 Apr 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+function hoverSpinButtons(event) {
+    var input = event.target,
+        x = event.offsetX,
+        y = event.offsetY,
+        width = input.offsetWidth,
+        height = input.offsetHeight,
+        SPIN_WIDTH = 11,
+        SPIN_MARGIN = 2,
+        maxX = width - SPIN_MARGIN,
+        minX = maxX - SPIN_WIDTH;
+
+    if (minX <= x && x <= maxX) {
+        if (y < height / 2) {
+            input.classList.remove("hover-down");
+            input.classList.add("hover-up");
+        } else {
+            input.classList.remove("hover-up");
+            input.classList.add("hover-down");
+        }
+    } else {
+        input.classList.remove("hover-up");
+        input.classList.remove("hover-down");
+    }
+}
+
+function unhoverSpinButtons(event) {
+    event.target.classList.remove("hover-up");
+    event.target.classList.remove("hover-down");
+}
+
+function augmentSpinButtons() {
+    var inputs, i, length;
+
+    inputs = document.getElementsByTagName("INPUT");
+    for (i = 0, length = inputs.length; i < length; i += 1) {
+        if (inputs[i].type === "number") {
+            inputs[i].addEventListener("mousemove", hoverSpinButtons);
+            inputs[i].addEventListener("mouseout", unhoverSpinButtons);
+        }
+    }
+}