I like using a:hover pseudo CSS class for styling hyperlinks in HTML and I would like to do the similar with hyperlinks inside text displayed with Flex 2.0.1 SDK UI components such as mx:TextArea and mx:Text.
In Flex 2.0.1 SDK the support for a:hover pseudo CSS classes is done via runtime style sheets.
<mx:TextArea> component starting from Flex 2.0.1 SDK supports setting CSS stylesheet at runtime right from the box.
<mx:Text> is not that ready to accomplish the similar task, fortunately for us it is easy to extend <mx:Text> component and add the required functionality to it - see the code below.
package com.jabbypanda.controls { import mx.controls.Text; import flash.text.StyleSheet; public class ExtendedText extends Text { public function ExtendedText() { super(); } public function get styleSheet() : StyleSheet { return textField.styleSheet; } public function set styleSheet(value : StyleSheet) : void { textField.styleSheet = value; } } }
Example: http://jabbypanda.com/labs/hoverCSS/HoverCSSFlexSupport.html
Source files: http://jabbypanda.com/labs/hoverCSS/srcview/index.html
Acknowledgements:
In my experiments I was both inspired by the quote from Flex 2 livedocs:'You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets' and by reading a great article followed by very useful comments published at FlashLit blog titled "Styling Flex TextArea content with CSS".
