javascript - 更改图像 :hover 上的图像文件路径

Question

我目前正在一个投资组合网站上工作，我必须在其中的几行中插入一系列引用 Logo ，就像:

<div class="row">
    <div class="col-sm-2 reference">
        <a href="#"><img class="img-responsive" src="img/logo section/final/faded/adelie.png" alt="Adelie"></a>
    </div>
    <div class="col-sm-2 reference">
        <a href="#"><img class="img-responsive" src="img/logo section/final/faded/amageme.png" alt="Amageme"></a>
    </div>
    <div class="col-sm-2 reference">
        <a href="#"><img class="img-responsive" src="img/logo section/final/faded/bakey.png" alt="Bakey"></a>
    </div>
    <div class="col-sm-2 reference">
        <a href="#"><img class="img-responsive" src="img/logo section/final/faded/byensdepot.png" alt="Byensdepot"></a>
    </div>
    <div class="col-sm-2 reference">
        <a href="#"><img class="img-responsive" src="img/logo section/final/faded/dialoogle.png" alt="Dialoogle"></a>
    </div>
    <div class="col-sm-2 reference">
        <a href="#"><img class="img-responsive" src="img/logo section/final/faded/drachmann.png" alt="Drachmann"></a>
    </div>
</div>

但是当将鼠标悬停在 Logo 上时，我想更改文件路径，例如:

var fadedpath = "img/logo section/final/faded/";
var colorpath = "img/logo section/final/color/";
$(".reference").hover(function(){
    $(this).attr(colorpath, filename);
}, function(){
    $(this).attr(fadedpath, filename);
});

这样做的正确语法是什么？因为说的是多个文件，在css中一个一个改是没有效果的。

Answer 1

您的代码几乎是正确的，但是您的 attr() 用户不正确。您需要使用 getter 来检索当前的 src，然后使用 replace() 获取值。您还需要更改 .reference 中图像的属性，而不是 .reference 元素本身。试试这个:

var fadedpath = "img/logo section/final/faded/";
var colorpath = "img/logo section/final/color/";

$(".reference").hover(function(){
    $(this).find('img').attr('src', function(i, src) {
        return src.replace(fadedpath, colorpath);
    });
}, function(){
    $(this).find('img').attr('src', function(i, src) {
        return src.replace(colorpath, fadedpath);
    });
});

另请注意，您不应在 URL 中使用的文件夹名称中放置空格。