Marten
Marten

Reputation: 854

Hover animation does not work in QSS in PyQT5

I am trying to create my first UI in PyQT5. However, I am unable to add a hover-animation to my button and I can't figure out why it does not work.

I am trying it with this stylesheet, instead off QPushButton#authenticate_button:hover I also tried #authenticate_button and QPushButton, nothing seems to work :

self.background_window.setStyleSheet("#authenticate_button {\n"
                                    "color: white;\n"
                                    "background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1,stop: 0 rgba(0,145,224,255), stop: 1 rgba(0,250,215,255)) ;\n"
                                    "border-radius: 0;\n"
                                    "border-radius: 20px;\n"
                                    "}\n"
                                    "\n"
                                    "#background_window {\n"
                                    "border-radius: 10px;\n"
                                    "background-color: rgb(50, 50, 50);\n"
                                    "}\n"
                                    "\n"
                                    "#key_textfield {\n"
                                    "background-color: transparent;\n"
                                    "border: 2px solid grey;\n"
                                    "border-radius: 10px;\n"
                                    "}\n"
                                    "QPushButton#authenticate_button:hover {\n"
                                    "border-radius: 30px;\n"
                                    "}\n"
                                    "")

It currently looks like this, however there is no change, when I hover over the element.

Issue

This is the whole code, sorry I tried to shorten it as much as I can, but I do not want to leave out important details:

class Ui_authenticate_window(object):
    def setupUi(self, authenticate_window):
        authenticate_window.setObjectName("authenticate_window")
        authenticate_window.setEnabled(False)
        authenticate_window.resize(300, 450)
        authenticate_window.setMaximumSize(QtCore.QSize(300, 450))

        self.centralwidget = QtWidgets.QWidget(authenticate_window)
        self.centralwidget.setEnabled(False)

     
        self.background_window = QtWidgets.QFrame(self.centralwidget)
        self.background_window.setGeometry(QtCore.QRect(10, 60, 280, 380))
        self.background_window.setStyleSheet("#authenticate_button {\n"
                                            "color: white;\n"
                                            "background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1,stop: 0 rgba(0,145,224,255), stop: 1 rgba(0,250,215,255)) ;\n"
                                            "border-radius: 0;\n"
                                            "border-radius: 20px;\n"
                                            "}\n"
                                            "\n"
                                            "#background_window {\n"
                                            "border-radius: 10px;\n"
                                            "background-color: rgb(50, 50, 50);\n"
                                            "}\n"
                                            "\n"
                                            "#key_textfield {\n"
                                            "background-color: transparent;\n"
                                            "border: 2px solid grey;\n"
                                            "border-radius: 10px;\n"
                                            "}\n"
                                            "QPushButton#authenticate_button:hover {\n"
                                            "border-radius: 30px;\n"
                                            "}\n"
                                            "")

        self.background_window.setObjectName("background_window")
        self.authenticate_button = QtWidgets.QPushButton(self.background_window)
      
        self.authenticate_button.setGeometry(QtCore.QRect(10, 320, 260, 41))
        font = QtGui.QFont()
        font.setFamily("Montserrat")
        font.setPointSize(11)
        font.setBold(True)
        font.setWeight(75)
        self.authenticate_button.setFont(font)
        

        self.authenticate_button.setObjectName("authenticate_button")
        
        self.key_textfield = QtWidgets.QLineEdit(self.background_window)
        self.key_textfield.setGeometry(QtCore.QRect(10, 270, 260, 25))
        font = QtGui.QFont()
        font.setFamily("Arial")
        self.key_textfield.setFont(font)
        self.key_textfield.setCursor(QtGui.QCursor(QtCore.Qt.ArrowCursor))
        self.key_textfield.setObjectName("key_textfield")
        self.logo_icon = QtWidgets.QToolButton(self.centralwidget)
        self.logo_icon.setGeometry(QtCore.QRect(100, 10, 100, 100))
        self.logo_icon.setStyleSheet("#logo_icon {\n"
        "background-color: transparent;\n"
        "}")
        
        creation_logo = QtGui.QIcon()
        creation_logo.addPixmap(QtGui.QPixmap("required/images/creation.ico"), QtGui.QIcon.Disabled, QtGui.QIcon.Off)
        self.logo_icon.setIcon(creation_logo)
        self.logo_icon.setIconSize(QtCore.QSize(1000000, 100000))
        self.logo_icon.setObjectName("logo_icon")
        authenticate_window.setCentralWidget(self.centralwidget)

        self.retranslateUi(authenticate_window)
        QtCore.QMetaObject.connectSlotsByName(authenticate_window)

    def retranslateUi(self, authenticate_window):
        _translate = QtCore.QCoreApplication.translate
        authenticate_window.setWindowTitle(_translate("authenticate_window", "creation. - Authentication."))
        self.authenticate_button.setText(_translate("authenticate_window", "Authenticate."))

Upvotes: 0

Views: 1131

Answers (1)

musicamante
musicamante

Reputation: 48529

You're disabling both the window and its central widget.

When a widget is disabled, it will not receive any mouse event, including hover events. Obviously, when a parent widget is disabled, any child (and subchild, to any level) is disabled with it.[1]

So, consider disabling only the parent (the main window), as re-enabling a disabled widget will only re-enable the children that has not been explicitly disabled. In your case, if you call setEnabled(True) on the window, it will not work anyway, since the central widget has been disabled.

Then, ensure that object names selectors also use the class, because if you're not careful enough you might add a child widget that has the same object name but a different class, and it will inherit the stylesheet even if it shouldn't.

Also, consider using layout managers (they can be easily created in Designer too), as using fixed geometries is often considered bad practice and almost always results in display issues (remember, what you see on your screen is never what others see in theirs, especially for widgets that display text and more importantly if you're using non-default fonts).

[1] The enabled property documentation says that the only exception are subclasses of QAbstractButton (which includes QPushButton), which accept mouse events even when disabled. This might be counterintuitive and could be confusing; the reality is that accepting an event doesn't mean that it's actually handled, so it doesn't mean that disabled buttons actually receive and react to those events (because they shouldn't!) but only that event() returns True instead of False (which is what any other widget would return if disabled), so that the event doesn't get propagated to the parent.

Upvotes: 2

Related Questions