7 Replies Latest reply on Jan 18, 2010 4:11 AM by mickey3

    disable hover effect on link buttons and menubar

    mickey3

      Is there a way to disable the hover effects?

      I don't want flex to highlight the entire component for both link buttons and menu bar.

       

      On the menubar, I applied a backgroundSkin, so having flex highlight the whole menubar when the user hovers their mouse on top quitely destroys the design.

       

      Thanks

        • 1. Re: disable hover effect on link buttons and menubar
          Jason Szeto Level 3

          Mickey,

           

          For LinkButton, I think you'll need to create your own skin class. Copy LinkButtonSkin and change the logic for the overSkin and downSkin states. Then assign this skin class to the "skin" style of your LinkButton.

           

          For MenuBar, you can set the "transulcent" style to true to hide the highlight.

           

          Jason

          • 2. Re: disable hover effect on link buttons and menubar
            mickey3 Level 1

            Jason,

             

            the translucent property does not seem to exist or affect the MenuBar at all - i am using flex 3.

             

            Perhaps you are using v4 that supports that style?

             

            do note i also tried "transparent" but does not work too.

            • 3. Re: disable hover effect on link buttons and menubar
              Jason Szeto Level 3

              <?xml version="1.0" encoding="utf-8"?>


              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                              creationComplete="initCollections()">
                  <mx:Style>
                      .myMB
                      {
                          translucent : true;
                      }
                     
                  </mx:Style>
                 
                  <mx:Script>
                      <![CDATA[
                      import mx.collections.*;
                      import mx.controls.Alert;
                      import mx.events.MenuEvent;
                     
                      [Bindable]
                      public var menuBarCollection:XMLListCollection;
                     
                      private var menubarXML:XMLList =
                      <>
                      <menuitem label="Menu1" data="top">
                      <menuitem label="MenuItem 1-A" data="1A"/>
                      <menuitem label="MenuItem 1-B" data="1B"/>
                      </menuitem>
                      <menuitem label="Menu2" data="top">
                      <menuitem label="MenuItem 2-A" type="check" data="2A"/>
                      <menuitem type="separator"/>
                      <menuitem label="MenuItem 2-B" >
                      <menuitem label="SubMenuItem 3-A" type="radio"
                      groupName="one" data="3A"/>
                      <menuitem label="SubMenuItem 3-B" type="radio"
                      groupName="one" data="3B"/>
                      </menuitem>
                      </menuitem>
                      </>;
                     
                      // Event handler to initialize the MenuBar control.
                      private function initCollections():void {
                      menuBarCollection = new XMLListCollection(menubarXML);
                      }
                     
                      // Event handler for the MenuBar control's itemClick event.
                      private function menuHandler(evt:MenuEvent):void  {
                      // Don't open the Alert for a menu bar item that
                      // opens a popup submenu.
                      if (evt.item.@data != "top") {
                      Alert.show("Label: " + evt.item.@label + "\n" +
                      "Data: " + evt.item.@data, "Clicked menu item");
                      }
                      }
                      ]]>
                  </mx:Script>
                     
                  <mx:MenuBar labelField="@label" itemClick="menuHandler(event);"
                              dataProvider="{menuBarCollection}" styleName="myMB"/>
              </mx:Application>
              • 4. Re: disable hover effect on link buttons and menubar
                mickey3 Level 1

                Jason,

                 

                it didn't help - this is a screenshot using your exact code:

                 

                http://img695.imageshack.us/img695/3469/hover.jpg

                notice the hover effect when i moved my mouse over the Menu1?

                 

                That's what i want to get rid of.

                 

                Both my "New" and "Tools" are menubar and it messes up the UI when the hover effects is applied on th menu bars.

                • 5. Re: disable hover effect on link buttons and menubar
                  Jason Szeto Level 3

                  What version of Flex are you running? I tested this on Flex 3.4.

                   

                  Jason

                  • 6. Re: disable hover effect on link buttons and menubar
                    mickey3 Level 1

                    Just using 3.0. I will update to 3.4 and try again. Thanks for letting me know.

                    • 7. Re: disable hover effect on link buttons and menubar
                      mickey3 Level 1

                      now i know why its not working - this maybe a bug to flex.

                       

                      Basically, when the MenuBar is in an ApplicationControlBar - then that style will not take effect.

                       

                      Now I need to think of something else to replace my ApplicationControlBar in the meantime, otherwise, thanks so much for the help.