7 Replies Latest reply on Dec 10, 2013 2:35 PM by resdesign

    Modifying the css of a Symbol on hover

    travis.self

      I am trying to change the z-index of a symbol upon hover. This symbol has a number of elements inside of it with their own timeline that triggers upon hover as well. I tried doing so at first through something along the lines of:

       

      sym.getSymbol("mySymbol").css("z-index","10");

       

      This did not work (and it's not the z-index either, I tried changing something basic like border color and it would not do so). However if this were an element as opposed to a symbol, this code would work.

       

      sym.$("myElement").css("z-index","10");

       

      What's confusing to me about this is that if you view the source code of an Edge document, converting a group of elements into a symbol on the HTML side merely throws these elements into a DIV. So why wouldn't you be able to modify the css in the same way you are able to with elements in Edge? Am I doing something wrong? I also tried adding a class name to the symbol, but I am unsure of how to select a css class created through Edge (via the method in the image below).

       

      edgeScreen.jpg