当前位置: 开发笔记 > 前端 > 正文

QtPushButton在hover时换图

作者：pingyuki | 来源：互联网 | 2023-05-19 14:28

现在要实现一个按钮中，左边是一个小图标，右边是文字。在鼠标移到按钮上时，换另外一个图标。小图标是使用icon加进去的。请问各位怎么有什么解决方案吗

#6

我使用重载实现了你的功能，可以看一下http://blog.csdn.net/z609932088/article/details/53301297

主函数
#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->pushButton->setIcon(QIcon(":/picture.ico"));
    ui->pushButton->setStyleSheet("QPushButton:hover{QIcon(:/logo.ico);}");

}
重载。h
#ifndef M_PUSHBUTON_H
#define M_PUSHBUTON_H

#include
#include
class m_pushbuton : public QPushButton
{
public:
    m_pushbuton(QWidget *parent);
    void enterEvent(QEvent* event);
    void leaveEvent(QEvent* event);
};

#endif // M_PUSHBUTON_H
重载。cpp
#include "m_pushbuton.h"

m_pushbuton::m_pushbuton(QWidget *parent): QPushButton(parent)
{

}

void m_pushbuton::enterEvent(QEvent *event)
{
    this->setIcon(QIcon(":/logo.ico"));
}

void m_pushbuton::leaveEvent(QEvent *event)
{
    this->setIcon(QIcon(":/picture.ico"));
}

这里我写的比较简单了，你可以在重在函数中加个参数，来改变资源路径

#7

引用 5 楼 u010111033 的回复:

QPushButton:hover{ /*鼠标悬停在按钮上时*/
image: url(:/images/loadin.png);
}

他要的的Ico的那种格式，这样写，换成ioc文件Qt提示语法问题
pushButton->setStyleSheet("QPushButton:hover{QIcon(:/logo.ico);}");
抱错

#8

引用 1 楼 caihuisinx 的回复:

qss完全可以实现你需要的功能

求具体代码，我没有弄出来

#9

不要光盯着图标看，把图标和字做在一张图片里，normal时设置普通时的图片，hover时设置另一张，这样在qss里只需设置背景图即可

#10

QSS 不支持按钮的 hover 切换图片，需要处理鼠标事件实现

bool FramelessWindowCentralWidget::eventFilter(QObject *watched, QEvent *e) {<br>
    // 鼠标进入或离开关闭按钮时设置为不同状态的图标<br>
    if (watched == ui->closeButton) {<br>
        if (e->type() == QEvent::Enter) {<br>
            ui->closeButton->setIcon(QIcon(":/icon/close-hover.png"));<br>
        } else if (e->type() == QEvent::Leave) {<br>
            ui->closeButton->setIcon(QIcon(":/icon/close.png"));<br>
        }<br>
    }<br>
<br>
    return QWidget::eventFilter(watched, e);<br>
}

#11

qt5.3以后 QSS 完全支持前面版本没去试过
[code=css
]QPushButton {
border:none;
background-image: url(:xxx.png);
background-repeat:no-repeat;
background-position: center;
}
QPushButton:hover {
background-image:url(:xxx.png);
}[/code]

#12

引用 10 楼 Inhibitory 的回复:

QSS 不支持按钮的 hover 切换图片，需要处理鼠标事件实现

?
1
2
3
4
5
6
7
8
9
10
11
12
bool FramelessWindowCentralWidget::eventFilter(QObject *watched, QEvent *e) { 
 // 鼠标进入或离开关闭按钮时设置为不同状态的图标 
 if (watched == ui->closeButton) { 
 if (e->type() == QEvent::Enter) { 
 ui->closeButton->setIcon(QIcon(":/icon/close-hover.png")); 
 } else if (e->type() == QEvent::Leave) { 
 ui->closeButton->setIcon(QIcon(":/icon/close.png")); 
 } 
 } 
 
 return QWidget::eventFilter(watched, e); 
}

这个方法好，收藏了了，不过这个方法是不是需要给每个button都注册一个鼠标事件了

#13

引用 10 楼 Inhibitory 的回复:

QSS 不支持按钮的 hover 切换图片，需要处理鼠标事件实现

?
1
2
3
4
5
6
7
8
9
10
11
12
bool FramelessWindowCentralWidget::eventFilter(QObject *watched, QEvent *e) { 
 // 鼠标进入或离开关闭按钮时设置为不同状态的图标 
 if (watched == ui->closeButton) { 
 if (e->type() == QEvent::Enter) { 
 ui->closeButton->setIcon(QIcon(":/icon/close-hover.png")); 
 } else if (e->type() == QEvent::Leave) { 
 ui->closeButton->setIcon(QIcon(":/icon/close.png")); 
 } 
 } 
 
 return QWidget::eventFilter(watched, e); 
}