2 Replies Latest reply on Jun 18, 2013 4:39 PM by elainecc

    Best way to determine if mouse is over menu item and store it in a var

    Marlene

      I have a list of menu items. I want them to change color when the user rolls over any of the six menu items. I want to write a function so it would be

       

      var = menuTarget;  (this is the item the user is currently mouseovering how do I define this?)

      menuTarget.mouseover(function(){

                $(this).css("color","red");

       

       

      })

      menuTarget.mouseout(function(){

                $(this).css("color","green");

       

       

      })


        • 1. Re: Best way to determine if mouse is over menu item and store it in a var
          AMULI Level 4

          Hi Marlene,

           

          Define the functions in your document.compositionReady event handler :

           

          sym.mouseOverMenu = function( eMenuItem)

          {

              $(eMenuItem.target).css("color", "red");

          }

           

          Then for each of the six menu item elements, you call the function in the menuItem<i>.mouseover event handler :

           

          sym.getComposition().getStage().mouseOverMenu( e);

           

          What you tried to express with var = menuTarget; is in fact captured by the target property (which one of the six) of the event object e that you pass as a parameter to the function.

           

          Gil

          • 2. Re: Best way to determine if mouse is over menu item and store it in a var
            elainecc Adobe Employee

            Another option is to set the following in each object's mouseenter (or mouseover) handler:

             

            sym.setVariable("currentSelection", "nameOfMyElement");

            // assuming each button has a Rectangle in it

            sym.getSymbol("myButton").$("Rectangle").css("background-color", "red");

             

            Or something of that sort... on the mouseout or mouseleave handler:

            sym.getSymbol("myButton").$("Rectangle").css("background-color", "blue");

            sym.setVariable("currentSelection", null);

             

            Hope that helps,

             

            -Elaine