Skip to main content
D
Dan349
Known Participant
March 20, 2023
Answered

Button hover bring to front

  • March 20, 2023
  • 2 replies
  • 1438 views

Have been searching for ages but cant find a working solution.

 

I have 5 buttons, the hover states of the buttons are bigger than the original so when rolled over they the other buttons overlap the hover state. (See jpg.) I want to bring the button that is being hovered over to the front.

 

This is the code I have been trying but doesnt work...

 

this.bringToFront = function(e)
{
e.currentTarget.parent.addChild(e.currentTarget);
};

this.button_1.on("mouseover", this.bringToFront);
this.button_2.on("mouseover", this.bringToFront);
this.button_3.on("mouseover", this.bringToFront);
this.button_4.on("mouseover", this.bringToFront);
this.button_5.on("mouseover", this.bringToFront);

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Hi JoãoCésar

     

    Thanks again for your help. The page can be seen here...

     

    http://349clients.co.uk/networking/Network.html

     

    The FLA can be downloaded here...

     

    http://349clients.co.uk/networking/Network.fla


    Thanks for the file.

     

    Yeah, you have an invalid reference (button_2) when adding listeners for the mouse over event.

     

    It should be like this:

    this.button_1.on("mouseover", this.bringToFront);
//this.button_2.on("mouseover", this.bringToFront); // this button doesn't exist
this.button_3.on("mouseover", this.bringToFront);
this.button_4.on("mouseover", this.bringToFront);
this.button_5.on("mouseover", this.bringToFront);
this.button_6.on("mouseover", this.bringToFront);
this.button_7.on("mouseover", this.bringToFront);
this.button_8.on("mouseover", this.bringToFront);
this.button_9.on("mouseover", this.bringToFront);
this.button_10.on("mouseover", this.bringToFront);
this.button_12.on("mouseover", this.bringToFront);

     

    And the this.stop(); call is needed anyway.

     

    Regards,

    JC

    2 replies

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    March 20, 2023

    the code you posted will always work IF the buttons all have the same parent.  ie, if the parents are different, you may need to bring the parents to the front, too.

    D
    Dan349Author
    Known Participant
    March 20, 2023

    Thanks kglad
    By parent do you mean the layer each button is on? If so how do I bring the layer to the front?

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    March 20, 2023

    no, not the layer.  the timeline.  are all the buttons on the same timeline?

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    March 20, 2023

    Hi.

     

    Call this.stop(); on the timeline where your code is located even if it has only one frame.

     

    This is necessary to any modification regarding depth/index in the HTML5 canvas document.

     

    Regards,

    JC

    D
    Dan349Author
    Known Participant
    March 20, 2023

    Hi JoãoCésar

    Thanks for your reply, I have added the code you sugested but it doesn't change anything. I have attached a screen shot of the code I now have.

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    March 20, 2023

    Thanks for the image.

     

    Do you mind uploading your FLA to a file sharing service (e.g.: Creative Cloud, Google Drive, Dropbox, WeTransfer) and paste the link here so that we can understand better what's going on?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices