Scripting Helpers is winding down operations and is now read-only. More info→
Ad
Log in to vote
2

OnHover Gui buttons? [closed]

Asked by 10 years ago

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!

Locked by adark and TheMyrco

This question has been locked to preserve its current state and prevent spam and unwanted comments and answers.

Why was this question closed?

3 answers

Log in to vote
3
Answered by
Ekkoh 635 Moderation Voter
10 years ago

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)
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? SlickPwner 534 — 10y
2
You would have to change it back. SanityMan 239 — 10y
Ad
Log in to vote
1
Answered by
SanityMan 239 Moderation Voter
10 years ago

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!

Log in to vote
1
Answered by
Vividex 162
10 years ago

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)
0
Can you fix the link to the tweening article? Thanks. :) SlickPwner 534 — 10y
0
There, should be fixed. Vividex 162 — 10y