Question

默认显示第一张图片，鼠标放上去显示第二张图片，鼠标移开又回到第一张图片，类似css的hover效果

默认显示第一张图片，鼠标放上去显示第二张图片，鼠标移开又回到第一张图片，类似css的hover效果，但是图片路径是从后台动态读取的，不能用css的hover效果，请问用jquery怎么实现啊？

Answer 1

两张图片放到一个div里面，一个显示 一个隐藏！

<div class="imglist">
<img class="show" src="a.jpg"/>
<img class="hidden" src="b.jpg"/>
</div>
<style>
.imglist .show{display:block;}
.imglist .hidden{display:none;}  
</style>  
<script>
$(document).ready(function(){
   $(".imglist .show").mouseover(function(){
      $(this).css("display","none");
      $(".imglist .hidden").fadeIn();
      $(".imglist .hidden").css("display","block");
    })  ;
   $(".imglist .hidden").mouseout(function(){
      $(this).css("display","none");
      $(".imglist .show").fadeIn();
      $(".imglist .show").css("display","block");
   }) ;
}) </script>

上面的代码只适用于只有两张图片！如果有多张图片，其他图片的class留空！

追问

那您这个如果这样该怎么办啊？

追答

仅修改脚本代码部分：

$(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");
   }) ;
})

追问

功能实现了，太感谢了，但是您能解释一下脚本部分的意思吗？

追答

这个 jq的基础功能，我觉得你自己应该揣摩揣摩！

追问

您说的对，但是我有点不明白.parent(".imglist").children(".show")的意思，为什么加了这句就可以了呢？

追答

意思就是获取当前show节点所在的imglist节点下的hidden节点，用于限定hidden的范围，因为class为hidden的节点有很多个，要保证设置的hidden的节点和show节点是一个imglist下面的！

Answer 2

var imgId = $("imgId");
var img1 = "img1.png";
var img2 = "img2.png";
$(imgId).hover(function(){
    $(this).attr("src", img1);
}, function(){
    $(this).attr("src", img2);
});

亲，有不懂的话随时追问哦！

追问

不太明白，这个img1和img2的地址是php读出来的。能把HTML代码页贴出来吗？