PS实用技巧：用原始图片制作显示（正常状态）、鼠标悬浮(hover)、鼠标点击(pressed)的方法

最新推荐文章于 2025-01-08 07:00:00 发布
最新推荐文章于 2025-01-08 07:00:00 发布
阅读量3.9w 收藏 10
点赞数 4
分类专栏： 图形图像处理 文章标签： 图标制作 PS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq21497936/article/details/79226258
版权

需求


        从网上下载图片很难下载到整套，包括一个按键的三种状态或者是多个图标非同色系，笔者没有整体配色，只讲述PS比较简单的制作方法，目前满足日常使用。

原理


        使用PS进行修改制作

实现步骤


步骤一：打开图标文件


步骤二：增加背景图层


步骤三：修改背景图层的颜色和透明度（hover状态的）


步骤五：剪裁保存（可设置剪裁大小），最好是另外存储文件“文件”中的“存储为”，注意存储格式，hover状态的到此结束。


步骤六：修改图标图标实体的颜色


步骤七：删掉“背景”图层，直接选中“图层0”新建背景图层，对背景使用填充进行上色，保存参照 步骤五


所制作的示例：


审查元素时，hover等伪元素，只会在鼠标悬停在对应元素上时生效。一旦鼠标移开，样式就会消失，已解决
花椒和蕊的博客
04-11 807
最近遇到个小小的问题通过控制台查看元素，只有在鼠标悬停在对应元素上时生效。一旦鼠标移开，样式就会消失即使我把右侧的这些都选上了也没用。
【QT】 QButton设置图片背景悬停样式 点击出现下拉菜单 QTable实现复制粘贴 QJson的读写 QDirIterator遍历目录 实现鼠标悬浮控件出现提示小框 组合快捷键
L2510408497的博客
07-01 784
最近在用QT写PE结构的分析工具，遇到了很多新的知识，在此记录，方便查阅若有新的收获，也会更新在此。 QTQButtonQButton设置图片背景悬停样式QTableWigetQTable设置表格头QButton设置图片背景悬停样式三级目录实现鼠标悬浮控件出现提示小框 QButton QButton设置图片背景悬停样式 ui->logButton->setStyleSheet("QPushButton{border-image: url(:/icon/Image/表单定制01.png);}"//
鼠标移入Hover
weixin_44542048的博客
02-01 292
开发工具与关键技术：DW CSS3 作者：麦智慧 撰写时间：2019.2.1
[PS GUI]快速制作Hover Pressed Icon图标
a379840689的专栏
02-11 470
1、创建图层 2、添加前景色白色或黑色 3、图层--》创建剪贴蒙板 4、图层工具栏处设置填充百分五十 不透明百分五十 依据情况来定 5、存储为web格式
鼠标hover及点击后动态显示相关元素样式
qq_24385297的博客
05-27 648
【代码】鼠标hover及点击后动态显示相关元素样式。
CSS快速入门-鼠标悬浮(hover伪类)
weixin_30357231的博客
04-19 1889
一、概述 hover伪类：在鼠标移到元素上时向此元素添加特殊的样式。比较普通的就是一个url，当你鼠标放上去后，会变颜色。 在现实的应用场景也非常之多。最常见的是网站的悬浮导航，当鼠标放到导航条上时，会出现颜色变化或者元素自动伸出菜单栏。 实例1：鼠标hover时，将内容框起来 <!DOCTYPE html> <html lang="en"> &...
WPF设置窗体可以使用鼠标拖动大小的方法
09-04
在WPF应用中，我们有时希望用户能够通过鼠标拖动窗体的边缘来改变窗口的大小。本篇文章将详细介绍如何实现这一功能，涉及到的核心技术包括Windows API调用以及窗体样式的修改。 首先，要让WPF窗体支持鼠标拖动大小...
PyQt5重写QComboBox的鼠标点击事件方法
01-01
百度了之后看了很多资料都没有找到直接的解决方法，但是大家都是在强调重写鼠标点击事件，然后自己慢慢实验终于写出来了。 我的开发环境是PyCharm+Python3.6+PyQt5.9.2 1、建立工程创建界面什么的我就不写了，百度一...
WPF 鼠标拖动图片放大缩小
07-19
在WPF（Windows Presentation Foundation）开发中，实现鼠标拖动图片并进行放大缩小的效果是一项常见的交互功能。这个功能可以提供用户更加直观的操作体验，尤其是在查看或编辑图像的应用中。以下将详细阐述如何实现...
linux捕获鼠标点击事件文件,Linux捕捉鼠标事件和键盘事件的方法
weixin_39558391的博客
04-29 2364
前段时间，工作中需要完成一个判断一段时间内是否人工操作操作的功能，基本思路就是要在后台监听键盘和鼠标的输入事件。那么如何能够捕捉鼠标和键盘的事件呢？下面分享我们的实现原理·及方法。捕捉设备输入事件的原理打开/dev/input目录，执行ls命令，我们可以看到类似下面的文件列表。$ ls -ltotal 0crw-r-----. 1 root root 13, 64 Jan 29 2018 eve...
从特效入手，深入了解CSS（二）：鼠标 hover 特效
黑猫几绛的博客
04-17 3630
不建议跳跃阅读！ 这篇文章将从头开始介绍如何实现一个特效 中间偶尔会穿插一些css3或平时接触不多的css属性
好看的鼠标hover效果
aiyulove201314的博客
09-19 2678
0919自我总结 常见的鼠标hover效果 展示效果:http://ianlunn.github.io/Hover/ 部分动画制作 <style><!-- .container { margin: 0 auto; width: 800px; } .button { ...
鼠标悬停之hover选择器
mitara的博客
06-03 3800
被迫营业的第三天b(￣▽￣)d 学习内容：hover选择题 老规矩，先上示例图
QPushButton/QLabel在鼠标悬浮（划过， hover）、选中（单击， pressed）状态下更换图标样式
热门推荐
weixin_43742643的博客
08-31 3万+
环境配置 ：MinGW + QT 5.12 三种图标样式（从左往右分别是normal，hover，pressed）: 先上效果图： 1. 样式表 第一种方法：在样式表中设置 border-image（在网上看到有人使用 background-image 的，不推荐，因为那样的话图标大小是不会自动缩放的，有兴趣的可以试一下）。 QPushButton *button1 = new QPushButton(this); butt.
图标炫酷hover
皮蛋solo粥的博客
04-11 185
<style> /* 首先这是外部引入的i图片，要把<i>替换成<img> 然后加上src去掉calss， 其次这里的图标都是镂空的空心，才能hover出黄金色的底色切记！！！ 其实没啥特别的，就是图标镂空然后改变伪类的底色而已 */ body { margin: 0; padding...
利用hover伪类实现点击文字弹出图片
久伴博客
07-09 4333
效果图这个二维码图片是可以用绝对定位控制位置的实现代码图片路径由于是本地,为了效果大家需要的自己设置图片路径&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; body { margin: 0; padding: 0; }
css中的hover用法示例（可以在vue中制作鼠标悬停显示摸个按钮的效果）
飙歌的博客
11-13 5204
css中hover属性，鼠标移到上面的时候可以激活，它可以实现悬浮元素上改变样式，改变子元素的样式，改变同级的样式以及改变就近元素的样式等。“:hover”必须位于“:link”和“:visited”之后（如果存在的话），这样样式才能生效。这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为绿色。这个是最普通的用法，只是通过a改变了style。hover选择器用于选择鼠标指针浮动在上面的元素，它适用于所有元素，可以用来实现类似于js的一些功能。2. ‘+’ 控制同级元素（兄弟元素）；
鼠标悬浮图片特效
soos的博客
09-03 638
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;背景图片悬浮放大&lt;/title&gt; &lt;style&gt; *{padding: 0px;margin: 0px;} .container{width: 80
CSS鼠标悬浮及其样式
BANaanaa的博客
01-08 1209
hover伪类用于定义鼠标悬浮时的样式，可以用于大多数HTML元素。常见的样式包括背景色改变、文本颜色变化、缩放、旋转、阴影效果、透明度变化等。使用transition可以使样式变化更加平滑。通过组合多种效果，可以创建复杂的交互体验。
QTableWidget QHeaderView::section: 除了hover、pressed还有什么状态
最新发布
04-01
<think>好的，我现在需要回答用户关于QTableWidget中QHeaderView的section状态种类的问题，尤其是除了hover和pressed之外的其他状态。首先，我得回忆一下Qt的文档和相关知识。 Qt中的样式表使用伪状态来定义不同情况下的样式。对于QHeaderView的section，常见的状态应该包括正常状态、悬停（hover）、按下（pressed）、选中（selected）等。但用户已经提到了hover和pressed，所以需要确认还有哪些其他可能的状态。 我记得Qt的控件状态有多个，比如:disabled（禁用状态）、:active（活动状态）、:checked（被选中状态，适用于可勾选的header）、:focus（焦点状态）等。不过，QHeaderView的section是否支持这些状态呢？比如，如果header可以被选中或排序，可能会有对应的状态。 另外，可能还有默认状态，即没有任何交互时的普通状态。这时候不需要任何伪状态修饰。比如直接定义QHeaderView::section的样式，就适用于普通状态。 需要验证这些状态是否适用于QHeaderView的section。比如，当header的某个section被点击后处于排序状态，是否有对应的:sort或类似的状态？或者是否使用属性选择器，比如[sortIndicator="true"]这样的方式？ 根据Qt的文档，QHeaderView的section支持以下伪状态： - :horizontal（水平header） - :vertical（垂直header） - :checked（当header带有复选框并被选中时） - :unchecked（复选框未选中） - :sort-asc（排序指示器升序） - :sort-desc（排序指示器降序） 不过这些可能属于不同的类别。例如，排序的状态可能通过属性来设置，而不是伪状态。或者可能需要使用子控件选择器，比如::sort-indicator。 另外，用户提到的状态可能包括是否被禁用（:disabled），或者是否处于活动窗口（:active）。比如，当窗口处于非活动状态时，section的样式可能会变化。 需要确保这些状态确实适用于QHeaderView的section。例如，当用户将鼠标悬停在section上，使用:hover；点击时是:pressed；而排序状态可能需要通过其他方式表示。或者，排序指示器的状态可能属于子控件的样式，而不是section本身的状态。 总结起来，除了hover和pressed之外，QHeaderView的section可能支持的状态有： - :disabled：当header被禁用时 - :selected：当section被选中（但需要确认header是否支持选中） - :checked：如果section有复选框并被勾选 - :unchecked：复选框未被勾选的状态 - :sort-asc和:sort-desc：当section的排序指示器显示升序或降序时 - :focus：当section获得焦点（可能不常见，但理论上可能） - :default：默认状态，可能不常用 此外，可能还可以根据其他属性，如section是否可点击，是否被移动等，但可能这些需要结合其他选择器。 还需要参考用户提供的引用内容，是否有相关的样式设置。例如，引用[3]提到了设置列宽平均分配，但没有直接提到状态。引用[2]提到了header的设置，如ResizeToContents和StretchLastSection，但同样不涉及状态。 因此，最终的结论是，除了hover和pressed之外，QHeaderView的section的状态可能包括checked、unchecked、sort-asc、sort-desc、disabled等。需要确认这些状态是否确实可用，并正确应用在样式表中。</think>在QTableWidget的QHeaderView中，section的样式表支持多种交互状态，除了常见的`:hover`（悬停）和`:pressed`（按下）状态外，还包括以下重要状态： 1. **`:disabled`** 当表头被禁用时生效，例如： ```css QHeaderView::section:disabled { background: gray; } ``` 2. **`:checked` 与 `:unchecked`** 适用于带复选框的表头（需设置`setClickable(true)`）： ```css QHeaderView::section:checked { border: 2px solid green; } QHeaderView::section:unchecked { border: 1px solid red; } ``` 3. **排序指示器状态** 通过子控件选择器定义排序图标样式： ```css QHeaderView::section::sort-indicator:ascending { image: url(asc.png); } QHeaderView::section::sort-indicator:descending { image: url(desc.png); } ``` 4. **方向状态** 区分水平/垂直表头： ```css QHeaderView::section:horizontal { font-weight: bold; } QHeaderView::section:vertical { color: blue; } ``` 5. **`:selected`** 当表头被选中时触发（需结合选择模式设置）： ```css QHeaderView::section:selected { background: #FFD700; } ``` --- ### 代码示例 ```cpp // 启用表头排序功能 ui->tableWidget->setSortingEnabled(true); // 设置表头可点击（允许触发状态变化） ui->tableWidget->horizontalHeader()->setSectionsClickable(true); ``` ```css /* 综合样式表示例 */ QHeaderView::section { padding: 4px; border: 1px solid #D3D3D3; /* 默认状态 */ } QHeaderView::section:hover { background: #F0F0F0; /* 悬停状态 */ } QHeaderView::section:pressed { background: #DCDCDC; /* 按下状态 */ } QHeaderView::section:checked { background: #E6F3FF; /* 复选框选中状态 */ } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长沙红胖子Qt（技术Q群4597637）

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值