jQuery+CSS实现鼠标悬停变灰效果

本站曾经介绍过一款jQuery+CSS实现鼠标悬停效果。但那是悬停变换图片，http://www.56mp.cn/post/40.html 大家可以看看以前发布的实现鼠标悬停效果。

今天给大家带来的是：jQuery+CSS实现鼠标悬停变灰效果

演示地址：http://www.56mp.cn/upload/GreyscaleHover

HTML部分：

首先写一个无序列表，用UL和LI标签。

<ul class="gallery">
<li>
<a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Image Name</a></h2>
</li>
</ul>

你会发现每个列表都包含<span>标签，将用于裁剪图像只显示其默认状态。

直观图片效果

CSS部分：

ul.gallery {
width: 708px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
width: 204px; /*--Width of image--*/
height: 182px; /*--Height of image--*/
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

jQuery部分：

调用jQuery的文件

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

这里的逻辑是要淡出默认缩略图，并设置了<a>标签的背景图像。

jQuery代码：

$(document).ready(function() {

$("ul.gallery li").hover(function() { //On hover...

var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

//Set a background image(thumbOver) on the <a> tag - Set position to bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

//Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().animate({opacity: 0}, 300);

} , function() { //on hover out...

//Animate the image back to 100% opacity (fade it back in)
$(this).find("span").stop().animate({opacity: 1}, 300);

});

});