mouseout: неправильный relatedTarget
сократил страничку до следующих размеров:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <script type="text/javascript"> var services = { init: function() { var cats = document.getElementsByTagName('h2'); for( var i=0; i<cats.length; i++ ) { cats[i].onmouseover = services.category_overOut; cats[i].onmouseout = services.category_overOut; } }, category_overOut: function( e ) { var e = e || window.event, tooltip = document.getElementById('tooltip'), relatedTarget = e.relatedTarget || e.toElement; if( tooltip.style.display == 'block' ) { if( services._shouldHide( relatedTarget ) ) tooltip.style.display = 'none'; } else { rememberCur( this ); // если закомментировать // то работает нормально tooltip.style.left = '0px'; tooltip.style.display = 'block'; tooltip.style.top = (this.offsetTop-$('tooltip').offsetHeight) + 'px'; } function rememberCur( e ) { services.h2 = e.tagName == 'H2' ? e : prv(e); services.ul = e.tagName == 'UL' ? e : nxt(e); } }, _shouldHide: function( relatedTarget ) { var tooltip = document.getElementById('tooltip'); return (tooltip != relatedTarget) && ! isParent(tooltip, relatedTarget) && (services.h2 != relatedTarget) && (services.ul != relatedTarget) && ! isParent(services.ul, relatedTarget); } }; function isParent( parent, el ) { while( el ) { if( el.parentNode == parent ) return true; el = el.parentNode; } return false; } function nxt( n ) { do { n = n.nextSibling; } while( n && n.nodeType != 1 ) return n; } function prv( n ) { do { n = n.previousSibling; } while( n && n.nodeType != 1 ) return n; } function $( id ) { return typeof id == 'string' ? document.getElementById(id) : id; } window.onload = services.init; </script> </head> <body> <ul><li style="line-height: 1.2;">Campaign Development <li style="line-height: 1.2;">Mailing List Aquisition <li style="line-height: 1.2;">Demographics <li style="line-height: 1.2;">Bulk Rate Savings <li style="line-height: 1.2;">Post Office Delivery <li style="line-height: 1.2;">Database Services <li style="line-height: 1.2;">Complete Production</ul> <h2 style="cursor: pointer;">Political</h2> <div id="tooltip" class="tooltip" style=" position: absolute; display: none; width: 450px; background: red; ">By large color we mean large sizes, something you cannot print on a regular printing press. We can print on different kinds of media, matte paper, glossy paper, vinyl and even canvas (fabric) for whichever application you need. From a poster mounted on foam board, a simple banner with grommets or a POP display to more complex Trade Show booths or large window graphics for retail.</div> </body> </html> при наведении на "Political" появляется всплывающая подсказка. При наведении на нее мыши, она не должна скрываться. Я не скрываю подсказку, если происходит mouseout c "Political" на подсказку. Но прикол в том, что в очень определенных условиях mouseout происходит на body, не на подсказку (и она исчезает). Чтобы воспроизвести ситуацию, нужно навести курсор на "Political", а потом медленно вести его вверх. При этом не получится перевести курсор на подсказку (как минимум ff3) При чем важно количество пунктов списка (не при всех количествах пунктов ситуация воспроизводится) и то, что у них стоит line-height: 1.2. Еще важно, чтобы была вызвана функция rememberCur (хотя каким боком она влияет, я хз). Позже продолжу разбираться. Может это только у меня оно так глючит O_o |
Часовой пояс GMT +3, время: 20:08. |