[SOLVED] QMenuBar styling - hovering item

maximus

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

SGaist

Hi,

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

maximus

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

SGaist

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

maximus

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;
}@

maximus

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

SGaist

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

maximus

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

SGaist

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

ray4qt

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.

maximus

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

SGaist

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 ?

maximus

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 :)

ray4qt

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.

SGaist

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.