css怎么设置鼠标变背景

css怎么设置鼠标变背景

　　大家对网页制作的CSS应该不陌生吧，那么，你们知道怎么设置鼠标变换背景的?下面是学习啦小编带来的关于css设置鼠标变背景的内容，欢迎阅读!

　　css怎么设置鼠标变背景?

　　方法一：

　　假设你的按钮的class是btn，两个背景图片分别是bg1.jpg和bg2.jpg，那么可以这样来做

　　css部分：

　　.btn {background:url(bg1.jpg);}

　　.btn:hover {background:url(bg2.jpg);}

　　html部分就很简单了，给input加个样式就行

　　使用这个样式时别忘了先把input的默认样式，那些padding、margin、border什么的都清零，然后再定义一下宽高，这样出来的视觉效果会好些。

　　方法二：

　　使用CSS :hover 伪类可以达到这个效果。

　　定义和用法

　　:hover 选择器用于选择鼠标指针浮动在上面的元素。

　　提示：:hover 选择器可用于所有元素，不只是链接。

　　提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

　　注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后(如果存在的话)，这样样式才能生效。

　　实例

　　div{background-color:grern;}div:hover{ background-color:yellow;}/*当鼠标悬浮到div上方是，将背景颜色更改为黄色*/

　　方法三：

　　于是仔细研究了一下，发现了这么句话：

　　*::-moz-selection {color:#fc5; background-color:#0f581a;}

　　恩，一看都知道了。

　　又在 google 中发现了一片文章：改变鼠标选中时文字的颜色

　　这么写道：

　　::-moz-selection{background:#93C; color:#FCF;}

　　::selection {background:#93C; color:#FCF;}

　　恩，其实就是这么回事了。

　　这样，就可以在 firefox 和 google chrome 中实现改变鼠标选中时的颜色和背景色了。

　　IE还是不行。就算是IE8也不行。恩，“永远是蓝底白字” 。