OnHover Gui buttons? [closed]
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
The event you're talking about is MouseEnter. It is fired when the mouse hovers over a GUI. An example would look like this.
1 | local btn = script.Parent |
2 | function Hover() |
3 | btn.BackgroundColor3 = Color3.new() |
4 | end |
5 | btn.MouseEnter:connect(Hover) |
1
2
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:
1 | local button = blah.blah.yourbutton |
2 | button.MouseEnter:connect(function() --if the mouse enters the button |
3 | button.BackgroundTransparency = 0.7 --change the transparency to highlight the button |
4 | end) |
5 | button.MouseLeave:connect(function() --when the mouse leaves the button |
6 | button.BackgroundTransparency = 1 --change the transparency to unhighlight back |
7 | 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:
01 | local menu |
02 | local button = blah.blah.yourbutton |
03 |
04 | button.MouseEnter:connect(function(x,y) --if the mouse enters the button |
05 | button.BackgroundTransparency = 0.7 --change the transparency to highlight the button |
06 | menu = blah.blah.PopupFrame:Clone --PopupFrame would contain your popup menu stuff |
07 | menu.Parent = button --place the menu under button |
08 | menu.Position = UDim2.new(0,x,0,y) --position the menu to the mouse |
09 | end) |
10 |
11 | button.MouseLeave:connect(function() --when the mouse leaves the button |
12 | button.BackgroundTransparency = 1 --change the transparency to unhighlight back |
13 | menu:remove() |
14 | 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:
01 | function Enter() |
02 | --Code |
03 | end |
04 |
05 | function Leave() |
06 | --Code |
07 | end |
08 |
09 | script.Parent.MouseEnter:connect(Enter) |
10 | 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:
01 | sp=script.Parent |
02 | function Enter() |
03 | sp:TweenPosition(UDim2.new(0,0,0,0), "Out","Linear") --Replace 0,0,0,0 with the position you want it to end too |
04 | end |
05 |
06 | function Leave() |
07 | 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 |
08 | end |
09 |
10 | script.Parent.MouseEnter:connect(Enter) |
11 | script.Parent.MouseLeave:connect(Leave) |
0
0
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?