jquery hover event between mousedown and mouseup - possible?

Question

If you imagine in microsoft paint you can click and hold to paint in an area, id like to do a similar but adding a class to cells in a table:

(note this isnt for painting/art just an easy way of explaining it!)

the following isnt working...

$(function(){
    $('td').mousedown(function(){
    console.log('down');
      $('td').bind('hover', function(){
        $(this).addClass('booked');
      });
    })

    $('td').mouseup(function(){
       $('td').unbind('hover');
    });
})

Answer 1

There's no "hover" event. Why not just add the class in the "mousedown" handler and remove it in "mouseup"?

If you want the class to be added only after a delay, then set a timeout in "mousedown" to add the class, and cancel the timeout in "mouseup" (and also remove the class).

$(function(){
  var timeout;
  $('td')
    .mousedown(function(){
      var $cell = $(this);
      timeout = setTimeout(function() {
        $cell.addClass('booked');
      }, 1000);
    })
    .mouseup(function(){
      cancelTimeout(timeout);
      $(this).removeClass('booked');
    });
});

Answer 2

Take a look at jQuery UI Selectable, which does something similar to what you described. Take a look at the demo. Simple implementation example:

<script type="text/javascript">
$(function() {
    $("#selectable").selectable();
});
</script>

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

Answer 3

solved:

mouseenter() rather than hover() which as Pointy pointed out is not explicitly a function