10 Replies Latest reply on Jun 24, 2013 11:01 AM by elainecc

    Assistance needed with hovers

    slitherax

      Hi there,

       

      In my project, I have several squares. When the mouse is hovered over these squares, I want them to change colour and when the mouse is taken away, I want them to change back. I managed to achieve this by creating copies of the squares with a different colour, and then showing and hiding appropriately with simple show and hide code, but this caused some problems. Therefore, I am wondering if this can be done via code, perhaps with the :hover CSS selector, or some other means. If so, I would be deeply gratified to know how this could be done.

       

      Many thanks,

      Dee Roberts

        • 1. Re: Assistance needed with hovers
          TimJaramillo Level 4

          Hi there, you can do this through code using the jQuery "mouseenter" and "mouseleave" events:

           

           

          // code on Stage.document.compositionReady:

           

          // hide "over" state initially ("over" is a shape nested inside the "btn" symbol)

          sym.getSymbol("btn").$("over").hide();

           

          sym.$("btn").mouseenter(function(){

               sym.getSymbol("btn").$("over").fadeIn(1000);

          });

           

          sym.$("btn").mouseleave(function(){

               sym.getSymbol("btn").$("over").fadeOut(500);

          });

          1 person found this helpful
          • 2. Re: Assistance needed with hovers
            slitherax Level 1

            Thank you for your reply, but this doesn't really do what I want. I want the colour of the square to change when the mouse enters it, but I don't want to have to use any other elements. Is this possible, or am I barking up the wrong tree, so to speak?

            • 3. Re: Assistance needed with hovers
              TimJaramillo Level 4

              Hi there, hopefully this will help you out, note that the object who's color we're changing btn.RectangleShape in my example below) has to be a simple shape div in Edge, it can't be a symbol.

               

              Example:

              www.timjaramillo.com/code/edge/rollover3_gsap_colorChange

               

              Source:

              www.timjaramillo.com/code/edge/_source/rollover3_gsap_colorChange.zip

               

               

              // code on Stage.document.compositionReady:

               

              // load GSAP anim library

              yepnope(

              {

              nope:[

                        'greensock/TweenMax.min.js',

                        'greensock/easing/EasePack.min.js',

                        'greensock/plugins/CSSPlugin.min.js',

                        'greensock/plugins/ColorPropsPlugin.min.js'

              ],

               

              complete: init

              }

              );

               

              //when yepnope has loaded everything execute init();

               

              function init (){

                        var coloredSquare = sym.getSymbol("btn").$("RectangleShape");

               

                         sym.$("btn").mouseenter(function(){

                                        TweenMax.to(coloredSquare, 1, {backgroundColor:"#938461", ease:Power2.easeIn});

                        });

               

              sym.$("btn").mouseleave(function(){

                             TweenMax.to(coloredSquare, 1, {backgroundColor:"#000000", ease:Power2.easeIn});

                        });

              }

              1 person found this helpful
              • 4. Re: Assistance needed with hovers
                Dam4222 Level 1

                It seems like all you want to do is this:

                 

                http://dl.dropbox.com/u/9159616/squares.zip

                 

                You could do this using code the way Tim suggested. But doing this without code is actually really easy for me. Just create a square> convert it to a symbol> animate the color> add mouseenter with Sym.play and mouseleave with Sym.PlayReverse > duplicate the symbol (not copy and paste). Then go into each symbol and modify the color.

                 

                Hope that helps.

                 

                Adam

                • 5. Re: Assistance needed with hovers
                  Rafael Zuma

                  Well, apparently not able to do the way down yet?

                  sym.$("divObject").animate({backgroundColor:"#ff6600},1000);

                   

                   

                  Below does not work in texts!

                  sym.$("textObject").animate({color:"#ff6600},1000);

                  • 6. Re: Assistance needed with hovers
                    elainecc Adobe Employee

                    Rafael-

                     

                    You're missing a quotation mark in there around "color".  Also, backgroundColor is the wrong parameter.  Remember that by using the animate() API, you're referring to CSS values.  So it would be background-color and color.

                     

                    Hopet hat helps.

                     

                    -Elaine

                    • 7. Re: Assistance needed with hovers
                      Rafael Zuma Level 1

                      But it is not working both ways.

                      I used keys, because I will put more CSS selectors in animate ().

                      • 8. Re: Assistance needed with hovers
                        elainecc Adobe Employee

                        Hi, Rafael-

                         

                        I'm pointing out a syntax error - you're missing a quotation mark (").

                         

                        Thanks,

                         

                        -Elaine

                        • 9. Re: Assistance needed with hovers
                          Rafael Zuma Level 1

                          After hexadecial, right? I know... i wrote quickly, sorry!

                          For example... in the code below, the animation run correctly TOP and LEFT, but COLOR not run.

                          "sinopse" is a text.

                           

                          Symbol.bindElementAction(compId, symbolName, "${_sinopse}", "mouseover", function(sym, e) {

                               sym.$("sinopse").animate({top:-5, left:100, color:"#ff6600"},1000,'linear');

                          });

                          • 10. Re: Assistance needed with hovers
                            elainecc Adobe Employee

                            Hey, Rafael-

                             

                            So the problem is more a limitation with jQuery.

                             

                            http://api.jquery.com/animate/

                             

                            According to the documentation, you'd need to use jQuery.Color or jQueryUI.

                             

                            -Elaine