XNA button hovering - button

Question

I have a button in my game. and I want to make it to change to other button image when mouse hover on it and change back when the mouse not in the button.
the problem is when the mouse went out from the button rectangle area, it not change back to the first image
my code like this :
public override void Update(GameTime gameTime)
{
base.Update(gameTime);
MouseState mouseState;
mouseDiBack = false;
mouseState = Mouse.GetState();
if (new Rectangle(mouseState.X, mouseState.Y, 1, 1).Intersects(backButtonRectangle))
{
backButton = backButtonHilite;
}
if ((mouseState.LeftButton == ButtonState.Pressed) &&
(new Rectangle(mouseState.X, mouseState.Y, 1, 1).Intersects(backButtonRectangle)))
{
mouseDiBack = true;
}
}
public override void Draw(GameTime gameTime)
{
spriteBatch.Draw(ScoreBG, ScoreBGRectangle, Color.White);
spriteBatch.Draw(backButton, backButtonRectangle, Color.White);
base.Draw(gameTime);
}
}
}
any idea how I to do it...?

Answer 1

Fairly simple solution, you didn't set the image back on the case where the mouse is not hovering.
if (new Rectangle(mouseState.X, mouseState.Y, 1, 1).Intersects(backButtonRectangle))
{
backButton = backButtonHilite;
}
else
{
backButton = originalImage; //whatever your Texture2D object may be called
}
Don't expect the machine to know that you want to switch back! Machines are stupid! ..Ok, it's actually because you overwrote the value of the variable and didn't reset it.

Answer 2

You are not setting your backButton back to what it used to be when the mouse moves out of the scope area. Take a look at the code below, and notice the added ELSE statement in your Update function.
defaultBackButton = backButton; //Save the default back button somewhere outside your update function
public override void Update(GameTime gameTime)
{
base.Update(gameTime);
MouseState mouseState;
mouseDiBack = false;
mouseState = Mouse.GetState();
if (new Rectangle(mouseState.X, mouseState.Y, 1,1).Intersects(backButtonRectangle))
{
backButton = backButtonHilite;
}
else
{
backButton = defaultBackButton;
}
if ((mouseState.LeftButton == ButtonState.Pressed) && (new Rectangle(mouseState.X, mouseState.Y, 1, 1).Intersects(backButtonRectangle)))
{
mouseDiBack = true;
}
}

Answer 3

As mentioned by Jon you need to set your original texture back when the mouse has left the rectangle.
bool mouseOverBackButton =
mouseX >= buttonRectangle.Left && mouseX <= buttonRectangle.Right &&
mouseY >= buttonRectangle.Top && mouseY <= buttonRectangle.Bottom;
backgroundTexture = mouseOverBackButton ? mouseOverTexture: mouseAwayTexture;
mouseDiBack = mouseState.LeftButton == ButtonState.Pressed && mouseOverBackButton;