css_mouse_events.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>CSS Mouse Events Testing</title>
  5. <style type="text/css">
  6. .squares div {
  7. width: 100px;
  8. height: 100px;
  9. border: 1px solid black;
  10. margin-right: 4px;
  11. float: left;
  12. }
  13. .squares div:hover {
  14. height: 200px;
  15. background-color: red;
  16. }
  17. </style>
  18. <script language="javascript" type="text/javascript" src="js/jquery-1.6.2-min.js"></script>
  19. </head>
  20. <body>
  21. <div class="squares">
  22. <div id="reset-square">reset</div>
  23. <div id="action-square">mouse action</div>
  24. </div>
  25. <script>
  26. $('#action-square').bind('contextmenu', function (e) {
  27. // Prevent opening the context menu on right click as the browser might consider the
  28. // mouse is in the context menu rather than hovering the element
  29. e.preventDefault();
  30. });
  31. </script>
  32. </body>
  33. </html>