Edge animate - How to hover and active effect in CSS ?

Question

Hi
I have facing some problem in adding hover/active effect in css.
For examples - i have two text button - (home & about us)
i want to add functionality that, when i hover on button, it will show underline, when click it, it will active with different color
& when i click anther button active button should be deactive & clicked button should be active.
Plz help...
Regards
Susanta Kumar Muduli

Answer 1

Hi there,
  The easiest way to achieve this would be to specify the properties with code since there is no animated transition that you're looking for.
  Start by opening Edge Animate and making two text fields with "home" and "about us". Then, name the text fields with a <div> ID by changing the name in the Properties panel. Click in the top text area and change the name <div> ID to something that's easy to identify with. I chose "homeText":
Repeat this step for the "about" text field. Next, click the Open Actions icon next to your home text field object in the Timeline area:
Choose "click" in the pop up menu that appears:
Copy and paste this code below (this is CSS code styling the color property). Make sure to change "homeText" to whatever you chose to call the home text field object:
sym.$("homeText").css("color", "#650097");
sym.$("aboutText").css("color", "#000");
In this example I made the home link's active color #650097 (purple). This code tells Edge Animate to make the home link purple and to make sure that the about link is the default black (#000).
Next, click the plus button in the Open Actions window. This time choose "mouseover". This is where we will add the code for the hover functionality.
Copy and paste the following code into the code window:
sym.$("homeText").css("text-decoration", "underline");
Finally, hit the plus button again to add one more event to the buton. This time choose "mouseout". This code will add funtionality to the button to make the underline disappear after the user is not hovering over it anymore. Copy and past the following code into the code window:
sym.$("homeText").css("text-decoration", "none");
Repeat these steps for the aboutText button. The code for the about button is below.
Click:
sym.$("aboutText").css("color", "#650097");
sym.$("homeText").css("color", "#000");
Mouseover:
sym.$("aboutText").css("text-decoration", "underline");
Mouseout:
sym.$("aboutText").css("text-decoration", "none");
If you need additional clarification / instruction, let me know. I hope this helps!