Jquery 如何更改鼠标上方的图像并离开

这是我的网站：

我试过这个：

$("#portfolio li img").hover(

function() {


 $(this).attr("src", function() {

 return "images/" + this.alt + ".png";

 }),


 $(this).attr("src", function() {


 return "images/" + this.alt + "-over.png";

 });

但它不显示图像，因为某种原因，当我鼠标悬停在图像上时，当我取下鼠标时，图像显示没有任何迹象。我要的是一切

当页面加载每个图像时，src将等于alt attribute中与.png相关的内容

但是当鼠标移动到图像上时，src等于

它的alt attribe+-over.png然后当鼠标离开时，它会返回到alt原来是+.png的位置

$("#portfolio li img").bind('mouseover', function(){
    this.src = "images/" + this.alt + "-over.png";    
});

$("#portfolio li img").bind('mouseout', function(){
    this.src = "images/" + this.alt + ".png";
});

---

在悬停的第二个函数中，您忘记了创建一个函数

应该是

function(){
 $(this).attr("src", function() {
   return "images/" + this.alt + "-over.png";
 });
}

此外，您不必使用函数来创建新名称。。你可以直接做

所以

可能只是

$(this).attr("src", "images/" + this.alt + "-over.png");

---

这段代码可以完成您试图完成的任务。hover有两个参数，第一个是mouseenter的事件处理程序，第二个是mouseleave的事件处理程序。此外，如果您所做的只是构建一个简单的字符串，则不完全需要将匿名函数与attr一起使用

$("#portfolio li img").hover(
    function() {
        $this = $(this);
        $this.attr("src", "images/" + $this.attr('alt') + ".png");
    },
    function() {
        $this = $(this);
        $this.attr("src", "images/" + $this.attr('alt') + "-over.png");
    }
);

这段代码应该得到更好的优化。享受：

$(this).attr("src", "images/" + this.alt + "-over.png");

$("#portfolio li img").hover(
    function() {
        $this = $(this);
        $this.attr("src", "images/" + $this.attr('alt') + ".png");
    },
    function() {
        $this = $(this);
        $this.attr("src", "images/" + $this.attr('alt') + "-over.png");
    }
);