Permalink
Browse files

Add mouseenter/mouseleave event handlers which ensure an update is tr…

…iggered so that :hover styles take effect. Also adds a custom pie_hover class which can be used to add hover styles in IE6 on non-link elements.
  • Loading branch information...
1 parent f15300e commit 643433122b787270f8f9ed1aff0c4f0e8434651e Jason Johnston committed May 5, 2010
View
3 sources/PIE_open.js
@@ -3,7 +3,8 @@ var PIE = window['PIE'];
if( !PIE ) {
PIE = window['PIE'] = {
CSS_PREFIX: '-pie-',
- STYLE_PREFIX: 'Pie'
+ STYLE_PREFIX: 'Pie',
+ CLASS_PREFIX: 'pie_'
};
// Detect IE6
View
2 sources/closure_externs.js
@@ -2,5 +2,7 @@
function update(){};
function propChanged(){};
+function mouseEntered(){};
+function mouseLeft(){};
function init(){};
function cleanup(){};
View
2 sources/closure_preservefunctions.js
@@ -2,5 +2,7 @@
update();
propChanged();
+mouseEntered();
+mouseLeft();
init();
cleanup();
View
21 sources/event_handlers.js
@@ -38,7 +38,7 @@ function update() {
*/
function propChanged() {
init();
- var name = event.propertyName,
+ var name = event && event.propertyName,
i, len, toUpdate;
if( name === 'style.display' || name === 'style.visibility' ) {
for( i = 0, len = renderers.length; i < len; i++ ) {
@@ -60,6 +60,25 @@ function propChanged() {
/**
+ * Handle mouseenter events. Adds a custom class to the element to allow IE6 to add
+ * hover styles to non-link elements.
+ */
+function mouseEntered() {
+ element.className += ' ' + PIE.CLASS_PREFIX + 'hover';
+ //must delay this because the mouseleave event fires before the :hover styles are added.
+ setTimeout( propChanged, 0 );
+}
+/**
+ * Handle mouseleave events
+ */
+function mouseLeft() {
+ element.className = element.className.replace( new RegExp( '\\b' + PIE.CLASS_PREFIX + 'hover\\b', 'g' ), '' );
+ //must delay this because the mouseleave event fires before the :hover styles are removed.
+ setTimeout( propChanged, 0 );
+}
+
+
+/**
* Handle property changes on ancestors of the element; see initAncestorPropChangeListeners()
* which adds these listeners as requested with the -pie-watch-ancestors CSS property.
*/
View
2 sources/htc_open.txt
@@ -3,6 +3,8 @@
<PUBLIC:ATTACH EVENT="onresize" FOR="window" ONEVENT="update()" /><!-- for IE8 -->
<PUBLIC:ATTACH EVENT="onmove" FOR="element" ONEVENT="update()" />
<PUBLIC:ATTACH EVENT="onpropertychange" FOR="element" ONEVENT="propChanged()" />
+ <PUBLIC:ATTACH EVENT="onmouseenter" FOR="element" ONEVENT="mouseEntered()" />
+ <PUBLIC:ATTACH EVENT="onmouseout" FOR="element" ONEVENT="mouseLeft()" />
<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
View
51 tests/hover-tests.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+
+ <style type="text/css">
+
+ html, body {
+ font: 12px sans-serif;
+ }
+
+ .tester {
+ behavior: url(../build/PIE_uncompressed.htc);
+ }
+
+ #test1 {
+ float: left;
+ padding: 2em;
+ border-radius: 8px;
+ background: #F99;
+ }
+ #test1:hover {
+ background: #9F9;
+ }
+
+ #test2 {
+ float: left;
+ clear: left;
+ padding: 2em;
+ margin-top: 3em;
+ background: #F99;
+ border-radius: 8px;
+ }
+ #test2:hover,
+ #test2.pie_hover {
+ background: #9F9;
+ }
+
+ </style>
+
+</head>
+<body>
+
+ <p>
+ <a href="#" class="tester" id="test1">Link</a>
+ </p>
+
+ <div class="tester" id="test2">Non-link</div>
+
+</body>
+</html>

0 comments on commit 6434331

Please sign in to comment.