前言
最近写小demo
中无意发现的,是想实现当鼠标悬停到按钮上面的时候,按钮实现动态变化,让人知道鼠标经过了按钮,效果如下
hoverDynamicPushButton
正文
首先是将按钮的边框给去掉,然后设置下它的悬停伪状态就行了
格式如下
*{
border:none;
}
QPushButton:hover{
border: border-width border-style border-color;
}
这里针对border的三个值我们要注意下
border-width
就是边缘的宽度,这个值设置的越大,最后你鼠标悬停在按钮上时,按钮就缩小的越厉害,这里我就不演示了,自己测试下吧。
border-style
这个是必须设置的,就是边缘线条的样式,比如none(无边框)、solid(实线)、dotted(点状线)、dashed(虚线)、double(双线)等。这里设置非none就好。
border-color;
最后这个也是最重要的,因为如果你颜色设置的不对,悬停时会有边缘线,比如我设置样式表为
最后悬停的效果为
那么如何解决呢?
这里我发现如果我们用颜色选择器,找到按钮周围的颜色,将边缘颜色设置成和周围颜色一样,这样不就行了?
说干就干
最后的效果,可以看到中间的播放确实小了,你可以和上面的对比下。
小结
加油