How to set a custom stylesheet for hover and pressed states

Question

I used this as my button pushButton's 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 its color, like I expect it to, but the hover color remains even when I press the button.

I tried changing the order, but It's still the same problem.

Inkstand

Answer 1

You can combine states, for example:

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

QSS reference — states

Tsuda

Answer 2

CSS, and QSS (Qt Stylesheet), 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);     
}

Timelag

Answer 3

//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);
}

Superfluid

Answer 4

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

Opuscule

Why did you think the question was about background images? – Sparks