Button Hove Effect Isn't Working

[WholemealDrop]

Continuation of my Phaser game that I've been working on for the last few months. Working on a menu system now and trying to polish up the buttons with a hover state. I based my button code off of the example from Phaser. My issue stems from it doesn't work as it should. Right now it doesn't do any hover over change unless you hold down the mouse button and then move your mouse off and on the button. So rather than being able to change between the over and out images and then on click images it currently only has a change for on click and if you hold down the mouse button on a button and move the cursor out and over the button it changes.I know it is super wordy but I don't know how else to explain it.

Here is my code:

var newgameButton;
    this.newgameButton = this.game.add.button(50, 50, 'NewGame', this.newGameOnClick, this, 1, 0, 2);
    this.newgameButton.onInputOver.add(this.over, this);
    this.newgameButton.onInputOut.add(this.out, this);
    this.newgameButton.onInputUp.add(this.up, this);

up: function() {
      console.log('button up', arguments);
  },

  over: function() {
      console.log('button over');
  },

  out: function() {
      console.log('button out');
  },

  newGameOnClick: function() {
    this.game.state.start('LevelTut');
  },

 

[squilibob]

Have you tried to set an upFrame?

this.newgameButton = this.game.add.button(50, 50, 'NewGame', this.newGameOnClick, this, 1, 0, 2, 0);

 

[WholemealDrop]

On 11/16/2016 at 3:48 PM, squilibob said:

Have you tried to set an upFrame?

this.newgameButton = this.game.add.button(50, 50, 'NewGame', this.newGameOnClick, this, 1, 0, 2, 0);

 

I tried that but it shouldn't need one. frame 1 should be hoverOver, frame 0 should be notOver, and frame 2 should be isDown. Just can't figure out how I only get a hover state if I hold down the mouse button.