Jquery-如何在悬停时更改img src

尝试

jQuery(function ($) {
    $('.meet-ats-top li').hover(function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('1.png', '2.png')
        })
    }, function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('2.png', '1.png')
        })
    })
})

或

jQuery(function ($) {
    $('.meet-ats-top li').hover(function (e) {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace(/('d+)(?='.)/, function (val) {
                return e.type == 'mouseenter' ? 2 : 1
            })
        })
    })
})

您可以尝试以下操作：

$(".dropdown-menu li a img").hover(function(){
   $(this).attr('src', $(this).attr('src').replace('1','2'));
}, function (){
   $(this).attr('src', $(this).attr('src').replace('2','1'));
})

希望它能起作用！

查找jQuery Hover方法：

http://api.jquery.com/hover/

或者，您可以使用CSS :hover

如何使用'；悬停'；在CSS 中

只需使用CSS即可。

HTML:

 <ul class="dropdown-menu meet-ats-top">
   <li><a href="#" class="google"></a></li>
        ...
 </ul>

CSS：

.google {
    background-image: url(/images/google.png);
    >>You have to add width and height depending on the Image
}
.google:hover {
    background-image: url(/images/google1.png);
}

编辑：

因为空的a-Tag没有任何维度，所以您应该在中添加另一个div/span

<li><a href="#" class="google">**<span></span>**</a></li>

CSS是这样的：

.meet-ats-top a span { width: XYpx; height: XZpx; }

$('.dropdown-menu').on('hover', function(){
    var a = $(this).find('img').attr('src');
    var temp = a.split('.');
    b = substr(0,a.temp[0]-1);
    $(this).find('img').attr('src',b+'2.'+temp[1]);
});

希望这项工作！

1。CSS方式（正确）

使用CSS精灵。将所有这些社交信息合并到一个文件中，并使用background-position对其进行定位。它们都将一次性下载（1个HTTP请求）

2.CSS方式（图像）

将所有图像放在html中并隐藏悬停的

    <li>
         <a href="#">
            <img src="/images/google1.png">
            <img src="/images/google2.png">
         </a>
    </li>

在您的CSS中：

.dropdown-menu a img {
    display: none; //this hides all images
}
.dropdown-menu a img:first-child {
    display: inline-block; //this shows the first child image
}
.dropdown-menu a:hover img {
    display: inline-block; //this shows all images on hover
}
.dropdown-menu a:hover img:first-child {
    display: none; //this hides the first image on hover
}

使用JS:

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

为您：

<ul class="nav navbar-nav">
<li><a href="#">Featured</a></li>
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meet ATS<b class="caret"></b></a>
        <ul class="dropdown-menu meet-ats-top">
        <li><a href="#"><img src="/images/google1.png" onmouseover="this.src='/images/google2.png'" onmouseout="this.src='/images/google1.png'" ></a></li>
        <li><a href="#"><img src="/images/in1.png" onmouseover="this.src='/images/in2.png'" onmouseout="this.src='/images/in1.png'"  ></a></li>
        <li><a href="#"><img src="/images/youtube1.png" onmouseover="this.src='/images/youtube2.png'" onmouseout="this.src='/images/youtube1.png'"  ></a></li>
        <li><a href="#"><img src="/images/facebook1.png" onmouseover="this.src='/images/facebook2.png'" onmouseout="this.src='/images/facebook1.png'"  ></a></li>
        <li><a href="#"><img src="/images/twitter1.png" onmouseover="this.src='/images/twitter2.png'" onmouseout="this.src='/images/twitter1.png'" ></a></li>
        </ul>
 </li>

Try this:
<div class="hover-img">
 <img src="images/ui-ux-1.png" />
</div>
$(function() {
  $(".hover-img").hover(function() {
  $(this).find('img').attr("src", "images/ui-ux-2.png");
    }, function() {
  $(this).find('img').attr("src", "images/ui-ux-1.png");
    });
  })