1
0

hovertest.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <html>
  2. <head>
  3. <title>Hover tests</title>
  4. <script src="jquery.js"></script>
  5. <style>
  6. /* Remove body dimensions so we can test enter/leave to surrounding browser chrome */
  7. body, html {
  8. border: 0;
  9. margin: 0;
  10. padding: 0;
  11. }
  12. p {
  13. margin: 2px 0;
  14. }
  15. .hover-box {
  16. background: #f33;
  17. padding: 3px;
  18. margin: 10px 40px 20px 0;
  19. }
  20. .hover-status {
  21. background: #f66;
  22. padding: 1px;
  23. }
  24. .hover-inside {
  25. background: #6f6;
  26. padding: 1px;
  27. margin: 8px auto;
  28. width: 40%;
  29. text-align: center;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <h2>Hover (mouse{over,out,enter,leave}) Tests</h2>
  35. <p>Be sure to try moving the mouse out of the browser via the left side on each test.</p>
  36. <div id="wrapper">
  37. <div id="hoverbox" class="hover-box">
  38. <div class="hover-status">
  39. <button>Activate</button>
  40. .hover() in/out: <span class="ins">0</span> / <span class="outs">0</span>
  41. </div>
  42. <div class="hover-inside">
  43. Mouse over here should NOT trigger the counter.
  44. </div>
  45. </div>
  46. <div id="liveenterbox" class="hover-box">
  47. <div class="hover-status">
  48. <button>Activate</button>
  49. Live enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
  50. </div>
  51. <div class="hover-inside">
  52. Mouse over here should NOT trigger the counter.
  53. </div>
  54. </div>
  55. <div id="delegateenterbox" class="hover-box">
  56. <div class="hover-status">
  57. <button>Activate</button>
  58. Delegated enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
  59. </div>
  60. <div class="hover-inside">
  61. Mouse over here should NOT trigger the counter.
  62. </div>
  63. </div>
  64. <div id="overbox" class="hover-box">
  65. <div class="hover-status">
  66. <button>Activate</button>
  67. Bind over/out: <span class="ins">0</span> / <span class="outs">0</span>
  68. </div>
  69. <div class="hover-inside">
  70. Mouse over here SHOULD trigger the counter.
  71. </div>
  72. </div>
  73. <div id="liveoverbox" class="hover-box">
  74. <div class="hover-status">
  75. <button>Activate</button>
  76. Live over/out: <span class="ins">0</span> / <span class="outs">0</span>
  77. </div>
  78. <div class="hover-inside">
  79. Mouse over here SHOULD trigger the counter.
  80. </div>
  81. </div>
  82. <div id="delegateoverbox" class="hover-box">
  83. <div class="hover-status">
  84. <button>Activate</button>
  85. Delegated over/out: <span class="ins">0</span> / <span class="outs">0</span>
  86. </div>
  87. <div class="hover-inside">
  88. Mouse over here SHOULD trigger the counter.
  89. </div>
  90. </div>
  91. </div> <!-- wrapper -->
  92. <script>
  93. $(function(){
  94. var x,
  95. countIns = function() {
  96. var d = $(this).data();
  97. $("span.ins", this).text(++d.ins);
  98. },
  99. countOuts = function() {
  100. var d = $(this).data();
  101. $("span.outs", this).text(++d.outs);
  102. };
  103. // Tests can be activated separately or in combination to check for interference
  104. $("#hoverbox button").click(function(){
  105. $("#hoverbox")
  106. .data({ ins: 0, outs: 0 })
  107. .hover( countIns, countOuts );
  108. $(this).remove();
  109. });
  110. $("#delegateenterbox button").click(function(){
  111. $("html")
  112. .find("#delegateenterbox").data({ ins: 0, outs: 0 }).end()
  113. .delegate("#delegateenterbox", "mouseenter", countIns )
  114. .delegate("#delegateenterbox", "mouseleave", countOuts );
  115. $(this).remove();
  116. });
  117. $("#liveenterbox button").click(function(){
  118. $("#liveenterbox")
  119. .data({ ins: 0, outs: 0 })
  120. .live("mouseenter", countIns )
  121. .live("mouseleave", countOuts );
  122. $(this).remove();
  123. });
  124. $("#overbox button").click(function(){
  125. $("#overbox")
  126. .data({ ins: 0, outs: 0 })
  127. .bind("mouseover", countIns )
  128. .bind("mouseout", countOuts );
  129. $(this).remove();
  130. });
  131. $("#liveoverbox button").click(function(){
  132. $("#liveoverbox")
  133. .data({ ins: 0, outs: 0 })
  134. .live("mouseover", countIns )
  135. .live("mouseout", countOuts );
  136. $(this).remove();
  137. });
  138. $("#delegateoverbox button").click(function(){
  139. $(document)
  140. .find("#delegateoverbox").data({ ins: 0, outs: 0 }).end()
  141. .delegate("#delegateoverbox", "mouseover", countIns )
  142. .delegate("#delegateoverbox", "mouseout", countOuts );
  143. $(this).remove();
  144. });
  145. });
  146. </script>
  147. </body>
  148. </html>