本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果。分享给大家供大家参考。具体实现方法如下:
复制代码 代码如下:
ul.gallery {
width: 750px;
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px 0 10px 25px;
padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline;
}
ul.gallery li a.thumb {
width: 336px;
height: 240px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span {
width: 336px;
height: 240px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333;
}
ul.gallery li h2 {
font-weight: normal;
margin: 0;
padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff;
}
ul.gallery li a {
text-decoration: none;
color: #777;
display: block;
font-size: 140%;
}
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。
Sunflowa Media
希望本文所述对大家的jQuery程序设计有所帮助。



