Pseudoelemente im QT-Designer

Question

Ich möchte Pseudoelemente verwenden, um eine vertikale Linie für die Schaltfläche auf der linken Seite zu erstellen und sie beim Hover abzublenden, aber qt-designer styleSheet versteht mich nicht und es wird nicht richtig angezeigt. Hier ist mein Code:

QPushButton{
position: relative;
padding: 10px 20px;
border: none;
background-color: #fff;
color: #333;
cursor: pointer;
overflow: hidden;
}

QPushButton:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background-color: #C6C6C6;
opacity: 0.5;
transition: all 0.3s ease-in-out;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

QPushButton:hover:before {
background-color: #7F7F7F;
opacity: 0.8;
}

Wie sieht es aus? Geben Sie hier eine Bildbeschreibung ein wie ich es wünsche Geben Sie hier eine Bildbeschreibung ein

Ich habe versucht, es anders umzuschreiben, aber ich bin nicht sehr gut darin

Answer 1

Qt 不支持 CSS 3.0，但支持 CSS 2.0。 你需要修改你的CSS以获得你想要的。 具体做法如下：

QPushButton{
position: relative;
padding: 10px 20px;
border: none;
background-color: #fff;
color: #333;
cursor: pointer;
overflow: hidden;
}

QPushButton:hover {
width: 5px;
height: 100%;
border-left: 6px solid #7F7F7F;
opacity: 0.5;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;

opacity: 0.8;
}