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!
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)
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)
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?