如何仅使用jquery替换悬停时的图像源的一部分？

<li class="active"><a href="#"><img src="images/static/personal_information.png" class="img-responsive center-block"><span>Personal<br> Information</span> </a></li>

这是我想如何仅使用jquery替换悬停时的图像源的一部分？

$(".navbar-nav li a").hover(function(){ 
     $(this).children("img").attr('src').replace('hover','static'); 
});

来源

2017-05-25 Gajanan Pawaskar

只需切换整个图像与另一个。那就是img元素。 –

现场串行downvoter ...会downvoter照顾评论完全有效的答案？ –

@SimeonSimeonoff Nope。 –

首先你的论点到replace()是错误的方法。其次，您需要在进行更换后实际设置该值。最后，您还需要提供hover()的另一个函数参数，以便将鼠标悬停后的原始图像重新设置。试试这个：

$(".navbar-nav li a").hover(function() { 
 
    $(this).children("img").prop('src', function(i, src) { 
 
    return src.replace('static', 'hover'); 
 
    }) 
 
}, function() { 
 
    $(this).children("img").prop('src', function(i, src) { 
 
    return src.replace('hover', 'static'); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="navbar-nav"> 
 
    <li class="active"> 
 
    <a href="#"> 
 
     <img src="images/static/personal_information.png" class="img-responsive center-block"> 
 
     <span>Personal<br> Information</span> 
 
    </a> 
 
    </li> 
 
</ul>

来源

2017-05-25 07:04:39

我添加了一个片段，因为至少有2个人不相信这个工程出于某种原因 –

嘿兄弟！感谢我只是想知道为什么你通过我的参数与功能和做什么（我是新来的jQuery）。 –

'i'参数是集合中元素的索引。以下是它的文档：http://api.jquery.com/prop/#prop-propertyName-function –

您正在更换src代码，但不分配回来。

$(".navbar-nav li a").hover(function(){ 
    var newSrc = $(this).children("img").attr('src').replace('hover','static'); 
    $(this).children('img').attr('src', newSrc) 
});

来源

2017-05-25 07:03:28 Justinas

只是FYI的'replace（）'参数是错误的方式 –

-1

你为什么瞄准<a>，然后选择其子<img>？为什么不直接将其应用于图像？

$(".navbar-nav li a img").hover(function(){ 
    $(this).attr('src') = $(this).attr('src').replace('hover','static'); 
});

来源

2017-05-25 07:08:01

OP的目标是'a'，因为它也包含一些文本以及'img'，并且可能他们想要当该文本被悬停时，更改src。另外，'replace（）'参数是围绕 –

错误的方式，好吧，够公平的。 –

如何仅使用jquery替换悬停时的图像源的一部分？

回答

相关问题