主页 / 问题 / 1584272
Accepted
Кирилл Протасов228
Asked:2024-06-18 02:50:39 +0000 UTC2024-06-18 02:50:39 +0000 UTC

将可更改的图标添加到按钮的背景，该图标取决于将鼠标悬停在按钮上

  • 772

如何向按钮添加两个背景图像，以便
如果光标未悬停在按钮上，则显示一张图像，
如果光标悬停在按钮上，则显示另一张图像？

不悬停光标的图片：

不悬停光标的图片

将鼠标悬停在按钮上时的图片：

在此输入图像描述

主要.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_())
python

2 个回答

  1. Best Answer

    使用样式：

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

    主要.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_())

    在此输入图像描述

    • 0

  2. 您可以使用该属性使这变得更容易hover

    让我们想象一下以下情况：

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

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

    在此代码片段中，我们创建一个带有标签 X 的按钮，并设置悬停属性。现在，当您将鼠标悬停在按钮上时，其背景将变为红色。

    使用此属性（悬停）您可以更改 QPushButton 的其他属性，如 Qt 文档中所述

    我在没有IDE的手机上编写了代码，如果其中有任何错误，请相信语法检查器

    • 0

相关问题