QT -- CSS 配置按钮鼠标放入的效果

最新推荐文章于 2026-05-19 07:18:00 发布

原创最新推荐文章于 2026-05-19 07:18:00 发布 · 857 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

C++基础同时被 2 个专栏收录

9 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细介绍了如何使用QT-CSS来配置QWidget下的Button控件，当鼠标悬停时改变其样式。主要涉及border-style、border-width、padding和border-color等属性的设置，实现按钮的美观交互效果。通过理解这些属性，可以更好地定制QT界面的视觉体验。

QT – CSS 配置按钮鼠标放入的效果

对应的属性是 hover

这里以配置对应QWidget下的Button

首先配置Widget的属性

 ui->widgetTop->setProperty("nav", "top");

配置对应Widget的Button按钮放入效果

 QWidget[nav="top"] QAbstractButton:hover{
 	border-style:solid;
 	border-width:0px 0px 2px 0px;
 	padding:4px 4px 2px 4px;
 	border-color:#00BB9E;
 }

解析

 2.1 border-style 属性用于设置元素所有边框的样式
 		none	定义无边框。
 		hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
 		dashed 	虚线
 		solid	实线
 		dotted	定义点状边框
 		inset	定义 3D inset 边框
 		ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
 		outset	定义 3D outset 边框
 		groove	定义 3D 凹槽边框
 		double	定义双线。双线的宽度等于 border-width 的值。
 2.2 border-width:
 	0px 0px 2px 0px;
 		上 右  下 左 (顺时针)
 2.3 padding
 	margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

 2.4 border-color:
 	颜色值: #00BB9E;