Добавление сменной иконки в фон кнопки, зависящей от наведения мышки на кнопку

Question

Как добавить две картинки фона в кнопку так, чтобы
если курсор не наведён на кнопку, отображалась одна картинка,
а если курсор наведён на кнопку, то другая?

Картинка без наводки курсора:

Картинка при наведении курсора на кнопку:

main.py:

import sys
from PyQt5 import QtCore, QtGui, QtWidgets


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setFixedSize(700, 440)
        self.setWindowFlags(QtCore.Qt.FramelessWindowHint)

        self.fon = QtWidgets.QLabel(self)
        fon_image = QtGui.QPixmap('images/fon.png')
        self.fon.setPixmap(fon_image)
        self.fon.resize(700, 440)

        self.exit_button = QtWidgets.QPushButton(self)
        exit1 = QtGui.QPixmap('images/exit1.png')
        exit2 = QtGui.QPixmap('images/exit2.png')
        # Как организовать добавление и зависимость картинки от наведений курсора?
        self.exit_button.resize(32, 32)
        self.exit_button.move(668, 0)
        self.exit_button.clicked.connect(exit)


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    w.show()
    sys.exit(app.exec_())

Answer 1

Используйте стили:

Stylesheet = '''
QPushButton {
    border-image: url(images/exit1.png);
}
QPushButton:hover {
    border-image: url(images/exit2.png);
}
'''

main.py

import sys
from PyQt5 import QtCore, QtGui, QtWidgets


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setFixedSize(700, 440)
        self.setWindowFlags(QtCore.Qt.FramelessWindowHint)

        self.centralWidget = QtWidgets.QWidget()                # +++
        self.setCentralWidget(self.centralWidget)               # +++
        
        self.fon = QtWidgets.QLabel(self.centralWidget)         # !
        fon_image = QtGui.QPixmap('images/man.png')             # fon.png 
        self.fon.setPixmap(fon_image)
        self.fon.resize(700, 440)

        self.exit_button = QtWidgets.QPushButton(self.centralWidget) # !
#        exit1 = QtGui.QPixmap('images/exit1.png')
#        exit2 = QtGui.QPixmap('images/exit2.png')
        # Как организовать добавление и зависимость картинки от наведений курсора?
        self.exit_button.resize(32, 32)
        self.exit_button.move(666, 2)                           # !
        self.exit_button.clicked.connect(self.close)            # !

# +++ vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Stylesheet = '''
QPushButton {
    border-image: url(images/exit1.png);
}
QPushButton:hover {
    border-image: url(images/exit2.png);
}
'''

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    
    app.setStyleSheet(Stylesheet)                               # <--- +++
    
    w = MainWindow()
    w.show()
    sys.exit(app.exec_())

Answer 2

Вы можете сделать это намного проще, используя свойство hover

Представим следующую ситуацию:

# Код в неком методе QWidget

button = QPushButton("X", self)
button.setGeometry(30, 30, 10, 10)
button.setStyleSheet("QPushButton::hover{background-color: red;}")

В этом отрывке кода мы создаём некую кнопку с лейблом Х, и задаём свойство hover. Теперь при наведении на кнопку, ее бекграунд будет меняться на красный.

При помощи этого свойства (hover) вы можете изменять и другие свойства QPushButton, описанные в документации Qt

Код писал на телефоне без IDE, если в нем есть какие-то ошибки, доверьтесь чекеру синтаксиса

БЛОГ НА HUSL

Добавление сменной иконки в фон кнопки, зависящей от наведения мышки на кнопку

Ответы (2 шт):