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

【问题标题】：Jquery - How to change img src on hover?Jquery - 如何在悬停时更改 img src？
【发布时间】：2015-05-05 06:23:12
【问题描述】：

是否可以在悬停时更改图像的 src 然后恢复为原始图像？例如“文件名始终相同”改变的是数字。 1 用于原始，2 用于悬停。非常感谢您的建议。

代码：

<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"></a></li>
            <li><a href="#"><img src="/images/in1.png"></a></li>
            <li><a href="#"><img src="/images/youtube1.png"></a></li>
            <li><a href="#"><img src="/images/facebook1.png"></a></li>
            <li><a href="#"><img src="/images/twitter1.png"></a></li>
            </ul>
     </li>
</ul>

【问题讨论】：

您想在哪里更改图像？您要在哪个控件的悬停事件上更改图像？
我认为这很明显，不是吗？
@MokshShah 在这 5 个中的一个上，取决于悬停在哪里。

标签： javascript jquery html css

【解决方案1】：

试试

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
            })
        })
    })
})

【讨论】：

【解决方案2】：

寻找 jQuery Hover 方法：

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

或者，您可以使用 CSS :hover

How to use 'hover' in CSS

【讨论】：

【解决方案3】：

$('.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]);

});

希望这项工作！

【讨论】：

【解决方案4】：

只需使用 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; }

【讨论】：

【解决方案5】：

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
}

【讨论】：

【解决方案6】：

使用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>

【讨论】：

【解决方案7】：

您可以尝试以下方法：

$(".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'));
})

希望它有效！

【讨论】：

【解决方案8】：

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");
    });
  })

【讨论】：