Assistance needed with hovers

Question

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

Answer 1

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});