Question

这是我的网站：http://iaddesign.com/beta/portfolio.php

我试过这个：

$("#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将等于与.png结合的alt attribuate中的内容

但是当鼠标移过图像时，src等于

它的alt attribe +“ - over.png”然后当鼠标离开时返回到什么alt是+“。png”

Answer 1

这样的东西？

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

Answer 2

此代码可能会实现您的目标。 hover()有2个参数，第一个是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");
    }
);

应该更好地优化此代码。享受：）

Answer 3

在你的第二个悬停功能中，你忘记了一个功能......

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

应该是

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

此外，您不必使用函数来创建新名称..您可以直接执行此操作..

所以

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

可能只是

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

如何在鼠标悬停时更改图像并离开

3 个答案: