Adobe Community: Message List - Edge animate - How to hover and active effect in CSS ?

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

forums_noreply@adobe.com — Sat, 26 Jul 2014 23:20:23 GMT

Very nice of you to take the time to generate the example!

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

forums_noreply@adobe.com — Mon, 02 Sep 2013 17:08:20 GMT

Yea! Thanks AMULI! Works perfectly. Also thanks for the jquery link. Wow, didn't realize we could use all these jquery fucntions, etc.

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

forums_noreply@adobe.com — Mon, 02 Sep 2013 10:23:50 GMT

Hi Miss Kai,

Look at the jQuery position() (or may be offset()) method : http://api.jquery.com/position/

Gil

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

forums_noreply@adobe.com — Sun, 01 Sep 2013 23:03:15 GMT

Hi resdesign.

I found a million examples on how to change a css property, but I can't figure out how to return the current value.

In my case I need to use the current left value of a button in a calculation.

How do I access the left value?

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

forums_noreply@adobe.com — Tue, 20 Aug 2013 11:29:04 GMT

To toggle the color you can add a flag like this:

var newC= true;

function changeColor(){

if (newC){

sym.$("aboutText").css("color", "#650097"); // color 1

newC= false;

} else

sym.$("aboutText").css("color", "#000000"); // color 2

newC= true;

}

// click event will use the function to toogle the color

sym.$('yourButton').click(function(){

changeColor();

});

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

forums_noreply@adobe.com — Tue, 14 May 2013 07:43:33 GMT

Hi dhosford

I have same question but little bit different. How if we have hover with animation,

Example, I have square icon when I mouse in icon it is fly from left to right (looping)

when mouse out, icon back to normal with reverse efect (back with fly from right to left, and steady on origin position).

Thanks in advance

Agnan

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

forums_noreply@adobe.com — Fri, 26 Apr 2013 23:09:02 GMT

This is very helpful thank you.

What if you wanted to sort of "toggle" the text color when clicking, that is, when you click it, it turns a certain color, then clicking it again sort of de-colors it. And, when clicked, the mouseout function should be disabled. Do you know how to do this?

Thanks so much.

Nemo

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

forums_noreply@adobe.com — Wed, 20 Feb 2013 03:01:18 GMT

I also made a sample project for you to have a look at. I hope this helps!

https://creative.adobe.com/share/a84e1f06-43ac-457f-848e-333e729f3e15

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

forums_noreply@adobe.com — Wed, 20 Feb 2013 02:58:53 GMT

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!

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

forums_noreply@adobe.com — Mon, 18 Feb 2013 05:31:25 GMT

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