jQuery: The Write Less, Do More JavaScript Library

Events/hover

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

[edit]

hover( over, out )

Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.
Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler).
Arguments:
overFunction
The function to fire when the mouse is moved over a matched element. 
function callback(eventObject) {
  this; // dom element
}
outFunction
The function to fire when the mouse is moved off of a matched element. 
function callback(eventObject) {
  this; // dom element
}

Examples:
To add a special style to table cells that are being hovered over, try:

    $("li").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      }, 
      function () {
        $(this).find("span:last").remove();
      }
    );



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("li").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      }, 
      function () {
        $(this).find("span:last").remove();
      }
    );

  });
  </script>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
  </style>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Chips</li>
    <li>Socks</li>
  </ul>
</body>
</html>

To add a special style to table cells that are being hovered over, try:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

NameType

Retrieved from "http://docs.jquery.com/Events/hover"