5 Replies Latest reply: Jan 18, 2013 8:46 AM by David Grieve RSS

    Hover color on ContextMenu

    jugen
      How do i change the hover color used on a menu item in a ContextMenu using setStyle() or getStyleClass().add()

      Actually I'd like to remove / switch off the hover color. I suppose this would be done by making the hover color the same as the normal background color or is there another / better way ?

      Thanks.
        • 1. Re: Hover color on ContextMenu
          984080
          I've tested this out, but seems not to work..



          The normal way should be something like this:
          .menu-item{
             -fx-background-color: blue;
          }
          
          .menu-item:hover{
             -fx-background-color: red;
          }
          • 2. Re: Hover color on ContextMenu
            jugen
            Thanks for replying.

            I don't want to do this on a global app scale though, just on this one particular ContextMenu's custom menu item.

            Would the following css and code then be correct ?
            .nohover:hover { -fx-background-color: transparent; }
            
            menuitem.getStyleClass().add("nohover");
            Edited by: jugen on Jan 16, 2013 1:11 AM
            • 3. Re: Hover color on ContextMenu
              984080
              At first look this seems correct:

              Don't forget to add your stylesheet to your scene like this:
              myScene.getStylesheets().add("myStyleSheet.css");
              Wath you can also do if it's for 1 particular ContextMenu, is to work with an id.
              so like this:
              menuitem.setId("myId")
              In the myStyleSheet.css file:
              #myId:hover{
                  -fx-background-color: transparent;
              }
              • 4. Re: Hover color on ContextMenu
                jugen
                Mmmm, so i tried this with mixed results ?
                .nohover:hover { -fx-background-color: transparent; }
                menuitem.setStyleClass("nohover");
                The above indeed produces the desired effect when the mouse is ON the menu item then the default caspian blue is not visible.

                However ContextMenu has a thin "border" and when the mouse crosses that border area then the menu item highlights in blue ?!

                Trying the above code on the ContextMenu makes it become transparent - so then the menu item hangs in the air.
                So I tried -fx-base and -fx-background instead of transparent but the blue highlight persists !?

                Any ideas anybody ?