ドキュメント

Events/hover

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

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 list items that are being hovered over, try:

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


   
  //li with fade class
   $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

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


   
  //li with fade class
   $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

  });
  </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 class='fade'>Chips</li>
    <li class='fade'>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");
  }
);

To unbind the above example use:

$("td").unbind('mouseenter mouseleave');

NameType