Add support for -pie-track-hover property to allow disabling of autom…

…atic :hover tracking
arjun07adhikari · May 12, 2012 · 7f94811 · 7f94811
1 parent e7d3630
commit 7f94811
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 2 deletions.
diff --git a/sources/Element.js b/sources/Element.js
@@ -5,6 +5,7 @@ PIE.Element = (function() {
         lazyInitCssProp = PIE.CSS_PREFIX + 'lazy-init',
         pollCssProp = PIE.CSS_PREFIX + 'poll',
         trackActiveCssProp = PIE.CSS_PREFIX + 'track-active',
+        trackHoverCssProp = PIE.CSS_PREFIX + 'track-hover',
         hoverClass = PIE.CLASS_PREFIX + 'hover',
         activeClass = PIE.CLASS_PREFIX + 'active',
         focusClass = PIE.CLASS_PREFIX + 'focus',
@@ -78,6 +79,7 @@ PIE.Element = (function() {
                     cs = el.currentStyle,
                     lazy = cs.getAttribute( lazyInitCssProp ) === 'true',
                     trackActive = cs.getAttribute( trackActiveCssProp ) !== 'false',
+                    trackHover = cs.getAttribute( trackHoverCssProp ) !== 'false',
                     childRenderers;
 
                 // Polling for size/position changes: default to on in IE8, off otherwise, overridable by -pie-poll
@@ -180,8 +182,12 @@ PIE.Element = (function() {
                     }
                     addListener( el, 'onresize', handleMoveOrResize );
                     addListener( el, 'onpropertychange', propChanged );
-                    addListener( el, 'onmouseenter', mouseEntered );
-                    addListener( el, 'onmouseleave', mouseLeft );
+                    if( trackHover ) {
+                        addListener( el, 'onmouseenter', mouseEntered );
+                    }
+                    if( trackHover || trackActive ) {
+                        addListener( el, 'onmouseleave', mouseLeft );
+                    }
                     if( trackActive ) {
                         addListener( el, 'onmousedown', mousePressed );
                     }

diff --git a/tests/track-hover_track-active.html b/tests/track-hover_track-active.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>-pie-png-fix test</title>
+
+    <style>
+
+        div {
+            behavior: url(../build/PIE.htc);
+            border-radius: 20px;
+            box-shadow: 0 0 10px blue;
+            background: white;
+            width: 200px;
+            height: 50px;
+            padding: 30px;
+            margin: 50px;
+        }
+
+        div.hover:hover {
+            border-radius: 30px;
+            box-shadow: 0 0 10px green;
+        }
+        #hover-false {
+            -pie-track-hover: false;
+        }
+
+        div.active:active {
+            border-radius: 50px;
+            box-shadow: 0 0 20px red;
+        }
+        #active-false {
+            -pie-track-active: false;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div class="hover" id="hover-true">
+        -pie-track-hover: true;
+    </div>
+    <div class="hover" id="hover-false">
+        -pie-track-hover: false;
+    </div>
+
+    <div class="active" id="active-true">
+        -pie-track-active: true;
+    </div>
+    <div class="active" id="active-false">
+        -pie-track-active: false;
+    </div>
+
+</body>
+</html>