[SOLVED] QMenuBar styling - hovering item



  • I am trying to change the background color of a QMenuBar Item when it is hovered.
    I tried this stylesheet:

    @/********************************* QMenuBar **********************************/
    QMenuBar {
    background-color: transparent;
    }

    QMenuBar::item {
    color : white;
    margin-top:4px;
    spacing: 3px;
    padding: 1px 10px;
    background: transparent;
    border-radius: 4px;
    }

    QMenuBar::item:hover {
    background: blue;
    color:red;
    }@

    Interface code :

    @ QMenuBar *menuBar = new QMenuBar();

    QMenu *menu = new QMenu("Menu1", this);
    menu->addAction("Toto");
    QAction *action_playOrPause = menu->addAction(QIcon(":/image/play"), tr("Play"));
    menuBar->addMenu(menu);
    
    QMenu *menu2 = new QMenu("?", this);
    menu2->addAction("About MaximumTrainer");
    QAction *action_playOrPause2 = menu2->addAction(QIcon(":/image/play"), tr("Play"));
    menuBar->addMenu(menu2);
    
    QGridLayout *gLayout =  static_cast<QGridLayout*>( ui->frame_menu->layout() );
    gLayout->addWidget(menuBar,0,0);@
    

    However the color never get blue when I'm hovering, i'm wondering if it's possible to achieve what I want with Qt?
    Another question, why is it impossible to add a QMenu from designer, i'd prefer all my UI code to stay in designer (ui file).
    Thank you


  • Lifetime Qt Champion

    Hi,

    Depending on your OS (i.e. OS X) the style might not be applied



  • Hi SGaist, i'm currently testing on Windows 8.1
    is the syntax "QMenuBar::item:hover" correct? Is this function available?
    I see plenty of Qt app that have hover effect in their menu..

    Thank you


  • Lifetime Qt Champion

    Looks good to me, did you try with the pressed state ?



  • The pressed state is working as intented

    Still can't get the hover to work correctly, right now the hover use the default Os hover style it seems (blue background on windows)
    see here:
    https://www.dropbox.com/s/8u188g13s7rf5yu/menuBarHover.png

    @QMenuBar::item:hover { ///not working
    background: red;
    color:red;
    }

    QMenuBar::item:pressed { /// working
    background: orange;
    color:blue;
    }@



  • Anyway this code is for windows only, I gave up on it for now.

    on mac os no styling is applied and it's working fine.
    on windows 8.1, the ::item:hover is not applied but the rest of the stylesheet is working


  • Lifetime Qt Champion

    I wonder if this is a limitation of the style sheet or a bug on windows...



  • I think it's a bug on Windows 8.1

    I'm back on windows 7 after uninstalling that **%% and hovering is working fine with this code:

    @/********************************* QMenuBar **********************************/

    QMenuBar {
    background-color: transparent;
    }

    QMenuBar::item {
    color : white;
    margin-top:4px;
    spacing: 3px;
    padding: 1px 10px;
    background: transparent;
    border-radius: 4px;
    }

    QMenuBar::item:selected { /* when selected using mouse or keyboard */
    background: #a8a8a8;
    }

    QMenuBar::item:pressed {
    background: #888888;
    }@

    Solution :
    1-Uninstall Windows 8.1
    2-install a good OS


  • Lifetime Qt Champion

    You should however consider opening a report about that, at least to let the developers known there's something fishy going on with Windows 8.1



  • It's not the operating system.

    @QMenuBar::item:hover@

    is incorrect, rather counter-intuitively actually.

    @QMenuBar::item:selected@

    is correct and works as expected on my Windows 8.1 system.

    That change was made in the last code example posted by maximus, presumably after he switched operating systems, so naturally it works.



  • It's true I changed the stylesheet from "item:hover" to "item:selected", I thought it was the OS.
    I'll make sure to use "item:selected" instead of "item:hover" for item stylesheet so it works on all OS

    Thanks


  • Lifetime Qt Champion

    hover vs selected is relative. You could very well have your cursor going over the menubar entries without having clicked on them, that would be hovering, wouldn't it ?



  • well for now selected act like hovering it seems.
    I use item::selected and when I hover it, it change according to ::selected stylesheet
    Don't know why they are two stylesheet name for it, i'm just happy as long at it works :)



  • When it comes to menu bars we have to use :selected. It does seem strange, but perhaps this is because the standard behavior, at least on Windows, is the color doesn't change between a hover and a click, so a separate setting for a hover is superfluous. Just a guess on my part.

    This behavior is the same on my Chakra Linux running KDE, but I don't know about the Gnome desktop or indeed the Mac. The fact the Qt developers made this choice makes me think this is common.

    Just a little "gotcha" along the way.


  • Lifetime Qt Champion

    That might simply be related to QMenu being used elsewhere like in a contextual menu.

    However, if there's indeed a difference of handling between menubar and contextual QMenu, that should be mentioned in the documentation.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.