两种效果
案例一代码
<html>
<head>
<script language="javascript" >
function show_img()//显示图片函数，鼠标移到链接触发
{document.getElementById("img_1").style.display = "block";}
function hide_img()//隐藏图片函数，鼠标离开链接触发
{document.getElementById("img_1").style.display = "none";}
</script>
</head>
<body>
<div align="center">
<a href="#" onMouseOver="show_img()" onMouseOut="hide_img()" >
<img id="img_2" src="#" /></a><!--自己定义图片src链接！-->
<div align="center"><img id="img_1" src="#" style="display:none" />
</div>
</div>
</body>
</html>
案例二代码
<div class="imglist" align="center">
<img class="show" src="#"/>
<img class="hidden" src="#"/>
</div>
<style>
.imglist .show{display:block;}
.imglist .hidden{display:none;}
</style>
<script>
$(document).ready(function(){
$(".imglist .show").mouseover(function(){
$(this).parent(".imglist").children(".show").css("display","none");
$(this).parent(".imglist").children(".hidden").fadeIn();
$(this).parent(".imglist").children(".hidden").css("display","block");
});
$(".imglist .hidden").mouseout(function(){
$(this).parent(".imglist").children(".hidden").css("display","none");
$(this).parent(".imglist").children(".show").fadeIn();
$(this).parent(".imglist").children(".show").css("display","block");
});
})</script>
</body>
</html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于