Question

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

这就是我的尝试

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

Answer 1

您正在替换src代码，但不会将其分配回来。

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

Answer 2

首先，你对replace()的论证是错误的。其次，您需要在进行替换后实际设置值。最后，您还需要为hover()提供另一个函数参数，以便在mouseout上重新设置原始图像。试试这个：

$(".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>

Answer 3

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

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

如何使用jquery在悬停时仅替换图像源的PART？

3 个答案: