Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
✓ ANSWER ACCEPTED

OnHover Gui buttons?

I'm working on designing a Gui system for a main menu type thing, and I want to know how to use an OnHover or something of the sort. I can't find any useful Wiki articles about it. Basically, all I want to know is how to make something happen, perhaps a TextButton's background color changing, or the TextButton's size changing slightly.

Obviously, TextButtons already do an OnHover background color change, but I want to be able to customize that color, perhaps have popup menus on hover, and the whole 9 yards. All I need is a simple, but in depth explanation.

Thanks!

3 answers

✓ Accepted answer

The event you're talking about is MouseEnter. It is fired when the mouse hovers over a GUI. An example would look like this.

local btn = script.Parent
function Hover()
	btn.BackgroundColor3 = Color3.new()
end
btn.MouseEnter:connect(Hover)

2 comments

1

So if I changed the Background color of the Button on MouseEnter, would I have to change it back on MouseLeave, or would it do that for me?

2

You would have to change it back.

I did this with one of my GUIs. I haven't ever used an OnHover, but I have used MouseEnter and MouseLeave.

Hooking this up to your buttons:

local button = blah.blah.yourbutton
button.MouseEnter:connect(function() --if the mouse enters the button
button.BackgroundTransparency = 0.7 --change the transparency to highlight the button
end)
button.MouseLeave:connect(function() --when the mouse leaves the button
button.BackgroundTransparency = 1 --change the transparency to unhighlight back
end)

Just set the BackgroundColor3 to your specific color, and your all set! Technically, this only works if your original BackgroundTransparency is 1 (invisible), but usually that is what people do.

EDIT: if you want a popup menu, you can just edit these a little bit. I would make the popup menu and store it (invisible), then clone it and place it at the space where the mouse is. You can do this with the x and y properties of MouseEnter:

local menu
local button = blah.blah.yourbutton

button.MouseEnter:connect(function(x,y) --if the mouse enters the button
button.BackgroundTransparency = 0.7 --change the transparency to highlight the button
menu = blah.blah.PopupFrame:Clone --PopupFrame would contain your popup menu stuff
menu.Parent = button --place the menu under button
menu.Position = UDim2.new(0,x,0,y) --position the menu to the mouse
end)

button.MouseLeave:connect(function() --when the mouse leaves the button
button.BackgroundTransparency = 1 --change the transparency to unhighlight back
menu:remove()
end)

Hope it helped!

Its called MouseEnter and MouseLeave, it sounds like you would like to learn about tweening to me. An example would be:

function Enter()
	--Code
end

function Leave()
	--Code
end

script.Parent.MouseEnter:connect(Enter)
script.Parent.MouseLeave:connect(Leave)

You should learn the "In" and Out" EasingDirection Enum The types of easing styles And TweenPosition, TweenSize, and TweenSizeAndPosition

Here is a basic code to make a gui open when you hover and close when it leaves:

sp=script.Parent
function Enter()
	sp:TweenPosition(UDim2.new(0,0,0,0), "Out","Linear") --Replace 0,0,0,0 with the position you want it to end too
end
 
function Leave()
	sp:TweenPosition(UDim2.new(0,0,0,0), "In","Linear") --Replace 0,0,0,0 with the position you want it to go back too
end

script.Parent.MouseEnter:connect(Enter)
script.Parent.MouseLeave:connect(Leave)

2 comments

0

Can you fix the link to the tweening article? Thanks. :)

0

There, should be fixed.

This discussion is preserved as it was. New answers, comments, and votes are closed.