鼠标滑过图片变暗文字链接滑出jQuery特效-CSDN博客

本文介绍了一个使用jQuery实现的鼠标滑过图片变暗并显示文字链接的特效。通过简单的HTML结构和jQuery代码，可以轻松地为网站添加交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果体验：http://hovertree.com/texiao/jquery/7.htm

HTML文件代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>

<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}

a, img {
border: 0;
text-decoration: none;
}

body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
background: #333;
color:white;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-table;
}
/* Hides from IE-mac */
*html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}
/* End hide from IE-mac */
* + html .clearfix {
min-height: 1%;
}
/* hovertreeaction */
.hovertreeaction {
width: 981px;
margin: 40px auto 0 auto;
overflow: hidden;
}

.hovertreeaction ul {
width: 996px;
}

.hovertreeaction ul li {
float: left;
margin-right: 14px;
margin-bottom: 13px;
display: inline;
width: 318px;
height: 343px;
overflow: hidden;
position: relative;
}

.hovertreeaction ul li .photo {
width: 318px;
height: 343px;
overflow: hidden;
}

.hovertreeaction .rsp {
width: 318px;
height: 343px;
overflow: hidden;
position: absolute;
background: #000;
top: 0px;
left: 0px;
}

.hovertreeaction .text {
position: absolute;
width: 318px;
height: 343px;
left: -318px;
top: 0px;
overflow: hidden;
}

.hovertreeaction .text h3 {
width: 318px;
margin-top: 130px;
height: 55px;
line-height: 55px;
text-align: center;
color: #FFFFFF;
background: #000000;
font-family: "microsoft yahei";
font-size: 26px;
}

#foot_bm a, #foot_bm, p, p a {
color: #666;
}
</style>

<div class="hovertreeaction">
<h1>鼠标滑过图片变暗文字链接滑出jQuery特效</h1><br />
<ul class="clearfix">
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/1.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/"><h3>HoverTree</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/2.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/menu/jquery/"><h3>何问起</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/3.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://keleyi.com/"><h3>柯乐义</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/4.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/menu/csharp/"><h3>C Sharp</h3></a></div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/5.jpg" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://tool.keleyi.com/"><h3>Keleyi</h3></a> </div>
</li>
<li>
<div class="photo"><img src="http://hovertree.com/texiao/jquery/7/6.gif" width="318" height="343" /></div>
<div class="rsp"></div>
<div class="text"><a href="http://hovertree.com/texiao/"><h3>网页特效</h3></a></div>
</li>
</ul>
<div class="clear"></div>
<a href="http://hovertree.com/hvtart/bjae/o8b7w9u8.htm" style="color:white;">原文</a>
</div>


<script>
$(document).ready(function(){

$(".hovertreeaction ul li .rsp").hide();

$(".hovertreeaction     ul li").hover(function(){
$(this).find(".rsp").stop().fadeTo(500,0.5)
$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
},function(){
$(this).find(".rsp").stop().fadeTo(500,0)
$(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
$(this).find(".text").animate({left:'-318'}, {duration: 0})
});

});
</script>


</body>
</html>