小程序登陆官网郑州关键词优化顾问

前言

最近写小demo中无意发现的，是想实现当鼠标悬停到按钮上面的时候，按钮实现动态变化，让人知道鼠标经过了按钮，效果如下

正文

首先是将按钮的边框给去掉，然后设置下它的悬停伪状态就行了
格式如下

*{ border:none;
}
QPushButton:hover{border: border-width border-style border-color;
}

这里针对border的三个值我们要注意下

border-width

就是边缘的宽度，这个值设置的越大，最后你鼠标悬停在按钮上时，按钮就缩小的越厉害，这里我就不演示了，自己测试下吧。

border-style

这个是必须设置的，就是边缘线条的样式，比如none（无边框）、solid（实线）、dotted（点状线）、dashed（虚线）、double（双线）等。这里设置非none就好。

border-color；

最后这个也是最重要的，因为如果你颜色设置的不对，悬停时会有边缘线，比如我设置样式表为

最后悬停的效果为

那么如何解决呢？
这里我发现如果我们用颜色选择器，找到按钮周围的颜色，将边缘颜色设置成和周围颜色一样，这样不就行了？
说干就干

最后的效果，可以看到中间的播放确实小了，你可以和上面的对比下。

小结

加油