This will help you learn how to add a basic Hover Over Effects to gui objects
Lets start by adding a ScreenGui into StarterGui, i will rename it to "Tutorial" for the sake of this tutorial, after that add a TextLabel, TextButton and a Frame inside the ScreenGui. It should look something like this
Now insert a localScript inside the ScreenGui
The way that we will be checking to see if the mouse is hovering over a gui object is
GuiObject.MouseEnter
The way that we will be checking to see if the mouse is not hovering anymore over a gui object is
GuiObject.MouseLeave
Example #1: Hover Over Effect for a TextLabel (TextColor3)
Inside the local script add this
local TextLabel = script.Parent.TextLabel
--change this to the path for your TextLabel
TextLabel.MouseEnter:Connect(function() --the function that will run when the mouse hovers over the TextLabel
TextLabel.TextColor3 = Color3.new(1, 0.666667, 0.498039) --here we change the TextLabels TextColor3 to #ffaa7f
end)
TextLabel.MouseLeave:Connect(function() --the function that will run when the mouse isnt hovering over the TextLabel
TextLabel.TextColor3 = Color3.new(1, 1, 1) --here we change the TextLabels TextColor3 to white
end)
Example #2: Hover Over Effect for a TextButton (TextColor3 and BackgroundColor3)
local TextButton = script.Parent.TextButton --change this to the path for your TextButton
TextButton.MouseEnter:Connect(function() --the function that will run when the mouse hovers over the TextButton
TextButton.TextColor3 = Color3.new(1, 0.666667, 0.498039) --here we change the TextButtons TextColor3 to #ffaa7f
TextButton.BackgroundColor3 = Color3.new(1, 0, 0) --here we change the TextButtons BackgroundColor3 to red
end)
TextButton.MouseLeave:Connect(function() --the function that will run when the mouse isnt hovering over the TextButton
TextButton.TextColor3 = Color3.new(0, 0, 0) --here we change the TextButton TextColor3 to black
TextButton.BackgroundColor3 = Color3.new(1, 1, 1) --here we change the TextButtons BackgroundColor3 to white
end)
Example #3: Hover Over Effect for a Frame (With Rotation)
local Frame = script.Parent.Frame --change this to the path for your Frame
Frame.MouseEnter:Connect(function() --the function that will run when the mouse hovers over the Frame
Frame.Rotation = -12 -- sets the frames rotation to -12
end)
Frame.MouseLeave:Connect(function() --the function that will run when the mouse isnt hovering over the Frame
Frame.Rotation = 0 -- sets the frames rotation to 0
end)