3 Replies Latest reply on Jul 9, 2015 2:20 PM by Zoze

    Change color on hover and click

    Zoze Level 1

      Hi,

       

      On dynamic created symbols I have actions:

       

      MouseEnter: to change color when mouse is over the button.

       

      MouseOut: to reset the color when the mouse is going to another button.

       

      And I have problem on click event because I can't keep the blck color, which means clicked to the symbol, as I have A mouseout that reset it.

       

      here is the code:

       

         $.getJSON("menubuttons.json").success (

       

       

         function (data) {

             $.each(data, function (index, item){

              var   menubtn = stage.createChildSymbol("templ-menubuttons", "Stage");

               var   menubtnelem = menubtn.getSymbolElement();

            

      menubtnelem.attr("id", item.title)

                      .css({ "background-size": "contain", "left": 1256, "top":"95px","cursor":"pointer" });

        menubtn.$("txt").html(item.title);

       

      //MouseOver

      menubtnelem.on("mouseenter", function () {

        if ($(this).attr("id")==="Exit"){

        TweenLite.to(menubtn.$("imageholder"),0.3, {backgroundColor:"red",left:"2px"});

        }

        else{

        TweenLite.to(menubtn.$("imageholder"),0.1, {backgroundColor:"black",left:"2px"});

        }

      });

       

       

       

       

      //MouseOut

        menubtnelem.on("mouseleave", function () {

        TweenLite.to(menubtn.$("imageholder"),0.1, {backgroundColor:"#ffcf00",left:"0px"});

       

       

      });

       

       

      //Click

        menubtnelem.on("mousedown", function () {

       

      // With "for" I am trying to reset the color of all the buttons to yellow and then the one that is clicked to be black ----- but doesn't work  ----  How is Possible to work?

       

      for(var i=0; i<data.length; i++){

        TweenLite.to(menubtn.$("imageholder"),0.1, {backgroundColor:"#ffcf00",left:"0px"});

      }

       

       

        TweenLite.to(menubtn.$("imageholder"),0.1, {backgroundColor:"black",left:"2px"});

       

       

       

       

       

       

       

       

      });

       

       

      });

      });