我目前正在一个投资组合网站上工作,我必须在其中的几行中插入一系列引用 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中一个一个改是没有效果的。
最佳答案
您的代码几乎是正确的,但是您的 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 中使用的文件夹名称中放置空格。
关于javascript - 更改图像 :hover 上的图像文件路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39409477/