如何为悬停和按下状态设置自定义样式表

Question

我用它作为我的按钮

pushButton

的样式表：

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

当我将鼠标悬停在其上时，它会改变颜色，就像我期望的那样，但即使按下按钮，悬停颜色仍然保留。

我尝试更改顺序，但仍然是同样的问题。

Answer 1

您可以组合状态，例如：

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

QSS 参考 — 状态

Answer 2

CSS 和 QSS（Qt 样式表）取决于声明的顺序。具有相同特性的后续声明将覆盖先前的声明。因此，为了让

pressed

状态优先，只需将其移至

hover

状态下方即可。

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

//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

您可以在QPushButton中设置图像：

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

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