网页效果中经常会用到图片的hover效果，本文中展示的是使用Jquery书写的效果，相比较ImageHover.css兼容性更好。

兼容性

插件是使用jquery书写的，所以兼容性比ImageHover.css更好。如果不需要考虑兼容性建议考虑 ImageHover.css 这个插件样式更多。

效果演示地址

Demo：http://weber.pub/demo/160920/index.html

下载

直接下载

链接：http://pan.baidu.com/s/1qXPy5y8 密码：7b8i

使用

• 1、css样式代码

.hover-down{width: 285px;height: 150px;position: relative;overflow: hidden;
}
.hover-down img{position: absolute;
}
.hover-down .hd-font{position: absolute;width: 285px;height:150px;z-index: 1;margin-top: -150px;color: #ddd;background: #000;filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8;
}
.hd-font span{padding: 20px;font-size: 14px;display: inline-block;line-height: 18px;
}
.hover-up{width: 285px;height: 135px;position: relative;overflow: hidden;background: #fff;
}
.hover-up img{width: 100px;
}
.hover-up .hu-font{height: 135px;width: 285px;
}
.hover-up .qr{position: absolute;width: 285px;height:135px;line-height: 135px;z-index: 1;margin-bottom: -135px;background: #fff;text-align: center;
}
.hover-up a{color: #4b8ce5;
}
.hover-up a:hover{color: #f8b600;
}

• 2、HTML代码

<div class="hover-down"><div class="hd-font"><span>web.pub测试文字测试web.pub测试测试文字</span></div><img src="img/11.jpg" alt="web.pub测试文字测试">
</div>
<div class="hover-up"><div class="hu-font center pr-lg pl-lg"><p class="f-20 c-333 mb-xs pt-md">web.pub</p><p class="f-14 c-666 mb-none">web开发者-努力学习中、、</p><hr class="solid mt-md mb-md"><a href="" class="">参观网站</a></div><div class="qr"><img src="img/qr.png" alt="web.pub"></div>
</div>

• 3、js代码 （需要引入jquery）

$('.hover-down').hover(function () {$(this).addClass(' case-test');$('.case-test .hd-font').animate({marginTop:'0px'},'1000')
},function () {$('.case-test .hd-font').animate({marginTop:'-150px'},'1000')$(this).removeClass(' case-test');
})
$('.hover-up').hover(function () {$(this).addClass(' case-test');$('.case-test .qr').animate({marginTop:'-135px'},'1000')
},function () {$('.case-test .qr').animate({marginTop:'0px'},'1000')$(this).removeClass(' case-test');
})

演示地址：http://weber.pub/demo/160920/index.html

结尾

by Weber.pub

本文地址：http://weber.pub/jq版图片的鼠标hover效果/211.html