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.

Answer 1

You can combine states, for example:

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

QSS reference - states

Answer 2

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

Answer 3

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

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