Comment changer la couleur du texte de mx togglebuttonbar sur mouseover

Question

Je veux changer la couleur du texte du contrôle MX ToggleButtonBar sur le survol en changeant le style que je veux changer la couleur du texte à différent. Est-ce que quelqu'un peut m'aider s'il vous plait. Par exemple, si vous cliquez sur le bouton Accueil, le texte de la couleur devrait passer au vert, mais pas à la couleur de fond.

<mx:ToggleButtonBar id="toggBar" direction="horizontal" horizontalGap="20" height="100" paddingLeft="60" 
         horizontalScrollPolicy="off" verticalScrollPolicy="off" selectedIndex="1" 
         > 
     <mx:dataProvider> 
      <fx:Object label="Home" id="home" screenIndex="-1"/> 
      <fx:Object label="About" id="about" screenIndex="1"/> 
      <fx:Object label="Contact" id="contact" screenIndex="2"/> 
      <fx:Object label="Help" id="help" screenIndex="3"/> 
     </mx:dataProvider> 
    </mx:ToggleButtonBar> 

Answer 1

Vous pouvez utiliser MXML pirater (ou un commentaire dans le code):

<mx:ToggleButtonBar id="toggBar" direction="horizontal" horizontalGap="20" height="100" paddingLeft="60" 
        color="0x00ff00" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" selectedIndex="1" 

        <!-- Warning! Better create custom ToggleButtonBar with your logic mouseOver --> 
        mouseOver="{UITextField((event.target).mx_internal::getTextField()).textColor=0xff0000}" 
        > 
    <mx:dataProvider> 
     <fx:Object label="Home" id="home" screenIndex="-1"/> 
     <fx:Object label="About" id="about" screenIndex="1"/> 
     <fx:Object label="Contact" id="contact" screenIndex="2"/> 
     <fx:Object label="Help" id="help" screenIndex="3"/> 
    </mx:dataProvider> 
</mx:ToggleButtonBar> 

Answer 2

Ajouter cette balise à l'élément:

onmouseover="this.style.color='#123456'" onmouseout="this.style.color='#654321'" 

Remplacer la première couleur avec ce que vous voulez changer pour, deuxième à la couleur, il est normalement.

Ou ajouter ceci à votre feuille de style:

#labelid1:hover {color:#123456;} 
#labelid2:hover {color:#123456;} 
#labelid3:hover {color:#123456;} 

Mieux encore ajouter un nom de classe à chacun des boutons et utilisez

.labelclassname:hover {color:#123456;}