2 Replies Latest reply on Feb 20, 2007 8:07 AM by JabbyPandaUA

    css hover on htmltext

    kimbflex

      I've got some external html files loaded in to a text component.

      How can I style the text so that the links are highlighted on rollover. Rather like CSS 'hover'?

      I tried messing around with the mx:Style of the textarea e.g.

      .myText A:link{TEXT-DECORATION: "underline"; COLOR:"#000000";}
      .myText A:hover{TEXT-DECORATION: "underline"; COLOR:"#000000";}
      .myText A:active{TEXT-DECORATION: "underline"; COLOR:"#000000";}

      but no joy.

      kimb
        • 1. Re: css hover on htmltext
          JabbyPandaUA Level 3
          There is no simple solution, AFAIK.

          Possible solutions:

          1) Use Flex 2.0.1, TextArea component and stylesheet declaration

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete()">
          <mx:Script>
          <![CDATA[
          private function onCreationComplete() : void {
          var style :StyleSheet = new StyleSheet();

          var aHover:Object = new Object();
          aHover.color = "#DD6600";
          aHover.textDecoration = "underline";

          var aLink:Object = new Object();
          aLink.color = "#00FF00";

          var aActive:Object = new Object();
          aActive.color = "#FF0000";

          style.setStyle("a:hover", aHover);
          style.setStyle("a:link", aLink);
          style.setStyle("a:active", aActive);

          myText.htmlText = "<a href=' http://www.google.com'>hello</a> my <b>user</b>";
          myText.styleSheet = style;
          }
          ]]>
          </mx:Script>
          <mx:TextArea id="myText" />
          <mx:Text id="myText2"/>

          </mx:Application>

          2) Extend mx:Text component to a new component with a custom method:

          package
          {
          import mx.controls.Text;

          public class myText extends Text
          {
          public function myText()
          {
          super();
          }

          public function get styleSheet():StyleSheet
          {
          return textField.styleSheet;
          }

          /**
          * @private
          */
          public function set styleSheet(value:StyleSheet):void
          {
          textField.styleSheet = value;
          }

          }
          }
          • 2. Re: css hover on htmltext
            JabbyPandaUA Level 3
            AFAIK, http://livedocs.adobe.com/flex/2/docs/00000561.html you cannot set
            pseudo styles a:hover, a:active, a:link via CSS, only via StyleSheet object.