Using Hover and Pressed stylesheet Qt

Question

I used this in my button pushButton stylesheet

 QPushButton#pushButton {
     background-color: yellow;
 }
 QPushButton#pushButton:pressed {
     background-color: rgb(224, 0, 0);     
 }
 QPushButton#pushButton:hover {
     background-color: rgb(224, 255, 0);
 }

when I hover my mouse over it, it changes color, like I expect it to , But the hover color remains even when I press the button. I tried changing the order, but its still the same problem . little new in Qt.

4

'pusButton'. Eeew! – Michael Scheper Aug 03 '16 at 21:33

Dmitry Sazonov · Accepted Answer · 2018-09-26T11:49:07.673

52

You can combine states, for example:

QPushButton:hover:!pressed
{
  border: 1px solid red;
}

QSS reference - states

edited Sep 26 '18 at 11:49

answered Oct 03 '13 at 14:41

Dmitry Sazonov

8,801
1
35
61

okay ! works fine. thanks a lot I used this :: QPushButton#pushButton { background-color:red } QPushButton#pushButton:hover:!pressed{ background-color:green } QPushButton#pushButton:hover { background-color:yellow } – harveyslash Oct 03 '13 at 14:42
It is an answer to your question, but in one line. I'll adjust it, if you don't understand ;). Main idea, that you can combine states as you wish. I propose to read qt documentation, there are a lot of useful samples - http://doc.qt.digia.com/4.7/stylesheet-reference.html – Dmitry Sazonov Oct 03 '13 at 14:43

score 5 · Answer 2 · answered Feb 10 '17 at 13:37

5

Css, and Qt CSS, depends on the order of declarations. Later declarations with the same specificity will overwrite previous declarations. So, in order to have the pressed state take precedence, simply move it below the hover state.

QPushButton#pushButton {
    background-color: yellow;
}

QPushButton#pushButton:hover {
    background-color: rgb(224, 255, 0);
}

QPushButton#pushButton:pressed {
    background-color: rgb(224, 0, 0);     
}

answered Feb 10 '17 at 13:37

mflodin

1,093
1
12
22

Is it normal that, on Windows 10, it does not work on hover, only once you've clicked it? – SamTheProgrammer Mar 05 '22 at 20:10

score 2 · Answer 3 · answered May 28 '22 at 08:09

This is the correct stylesheet as you want:

//base stylesheet
QPushButton
{
   background-color: yellow;
}
//pressed button stylesheet
QPushButton:pressed
{
  background-color: rgb(224, 0, 0);     
}
//hover stylesheet
QPushButton:hover:!pressed
{
  background-color: rgb(224, 255, 0);
}

score -2 · Answer 4 · answered Dec 04 '15 at 09:03

-2

You can set the image in QPushButton:

QPushButton#pushButton {
     background-url(Images/image1.png);
 }
 QPushButton#pushButton:pressed {
     background-url(Images/image2.png);   
 }

 QPushButton#pushButton:hover {
      background-url(Images/image3.png);
 }

answered Dec 04 '15 at 09:03

Bhaskar Kumar Singh

411
4
6

17

Why did you think the question was about background images? – Michael Scheper Aug 17 '16 at 16:00

Using Hover and Pressed stylesheet Qt

4 Answers4

Linked