在jquery主页上的“下载”按钮的启发下，我创建了一个鼠标悬停效果的按钮。它使用所有浏览器的不透明选项。您可以在这里看到一个演示:JButton演示。

点击查看按钮的演示。

下载zip，包含所有包含的文件:JButton。

该按钮的样式由以下类组成:

a.jbutton{
 background: transparent url(buttonleft.png) no-repeat top left;
 display: block;
 float: left;
 font: 22px "Tahoma";
 line-height: 49px; /* This value + 8px should equal height of the button */
 height: 57px;
 padding-left: 9px; /* Left part of image */
 text-decoration: none;
 outline:none;
 color:white;
 cursor:pointer;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
 opacity: 1;
 -moz-opacity: 0.99;
}
a.jbutton span{
 background: transparent url(buttonright.png) no-repeat top right;
 display: block;
 padding: 4px 9px 6px 0; /*Set right padding here to 'padding-left' value above*/
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a.jbutton:link, a.jbutton:visited{
 color: #F0F0F0; /* button text color */
}
a.jbutton:hover{
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
 opacity: 0.8;
 -moz-opacity: 0.8;
}
a.jbutton:hover span{
 color: #FFFFFF;
}

ihover（效果好，样式多，圆形加正方形，一共35种样式）

imagehover（极简主义）

因为有两个链接，全部的话放不上来，下面只放一个ihover的下载链接（因为他更酷呀，哈哈哈）。需要的请自行下载

切图网在做web前端项目切图的时候，图片的地方经常会加一点悬停效果，最最常见的是，鼠标移上去，图片稍微放大一点点，这样可能增强体验，增加互动。

下面整理了15中css3图片Hover悬停效果，基本你能想到的效果都在这了。

使用方法

鼠标悬停提示是指当鼠标悬停在某一元素上时浏览器弹出的黄色小文本框，一般开发者大多会结合Javascript创建各式各样的自定义提示，其实通过CSS定位也可以实现，首先我们看一下效果图：

接下来我们详细介绍它的实现方法：

1. 首先创建一个简单的带链接的HTML（根据自己的需要），在链接显示的文本后面添加需要提示的内容并置于span标签中（加粗部分）

   <p>
   

hover

CSS3 的鼠标悬停效果和动画，这些可以非常轻松的被应用到按钮、LOGO 以及图片等元素。所有这些效果都是只需要单一的标签，必要的时候使用 before 和 after 伪元素。因为使用了 CSS3 过渡、转换和动画效果，因此只支持 Chrome、Firefox 和 Safari 等现代浏览器。

使用

在 gulp 中使用