Adding events to a coffeescript implementation of a grid

Question

I found a coffeescript implementation of a hexgrid that uses Raphael to draw the grid onto the DOM. The code for the Cell object is below:

class Cell
  constructor: (r,coords) ->
    [ @r, @x, @y ] = [ r, coords.x, coords.y ]
    @colors =
      "bright": "#AAAAAA"
      "dim": "#8d9794"
      "blue": "#1e725b"
      "bright-blue": "#3f947d"
    @clicked = false
    @draw()
  path: ->
    "m0,0 -15.373745,26.6281 -30.74749,0 -15.373745,-26.6281 15.373745,-26.6281 30.74749,0 z"
  draw: ->
    @drawCell()
    @attachHandlers()
  drawCell: ->
    @cell = @r.path @path()
    @cell.attr
      "fill": @colors['dim']
      "stroke-width": 2
      "stroke": "#5f6664"
    @cell.transform "t#{@x},#{@y}s1"
  changeColor: (c) ->
    @cell.attr "fill": @colors[c]
  doClick: =>
    @clicked = not @clicked
    @hovered()
  hovered: =>
    @cell.toFront()
    if @clicked then @changeColor 'bright-blue' else @changeColor 'bright'
    @cell.animate transform: "t#{@x},#{@y}s1.2", 1000, 'bounce'
  unhovered: =>
    if @clicked then @changeColor 'blue' else @changeColor 'dim'
    @cell.animate transform: "t#{@x},#{@y}s1", 1000, 'bounce'
  attachHandlers: ->
    @cell.hover @hovered, @unhovered
    @cell.click @doClick

My aim is to turn the cursor into a pointer when hovering over any of the individual cells. I've tried various combinations of the following in the hovered method, to no avail:

@cell.mouseover(function(){
        container.css('cursor','pointer');
}
@cell.mouseout(function(){
        container.css('cursor','default');
}

A working codepen is here: http://codepen.io/drshoggoth/pen/nArtC

Answer 1

Changeing the design of the cursor is part of the design, not the logic. So I suggest to use just css

path {
  &:hover {cursor:pointer}
}

Otherwise after line 29 add

@cell.attr('cursor','pointer');

See http://codepen.io/SaschaKluth/pen/GZXYmr