javascript - Jquery - How to change img src on hover? - Stack Overflow

admin管理员组

文章数量:1356808

Is it possible to change src of image on hover and then back to original ? For example "name of file is always same" what is changing is number. 1 is for original and 2 is for hover. Thank you very much for advice.

Code:

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

Is it possible to change src of image on hover and then back to original ? For example "name of file is always same" what is changing is number. 1 is for original and 2 is for hover. Thank you very much for advice.

Code:

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Mar 4, 2015 at 10:01 Josef IIIJosef III 1311 gold badge11 silver badge22 bronze badges 3

• where you want to change the image? on which control's hover event you want to change image? – Mox Shah Commented Mar 4, 2015 at 10:05
• I think that's pretty obvious, isn't it? – CompanyDroneFromSector7G Commented Mar 4, 2015 at 10:05
• @MokshShah on one of these 5, depends where is hover. – Josef III Commented Mar 4, 2015 at 10:06

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 2

Try

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

---

Or

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

You can try the following :

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

Hope it works !

Look for the jQuery Hover method:

http://api.jquery./hover/

Or, you can do it with CSS :hover

How to use 'hover' in CSS

Just make it with 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);
}

EDIT:

Because an empty a-Tag doesn´t have any dimensions you should add another div/span inside:

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

And CSS like this:

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

});

Hope this work!

1. CSS way (proper)

Use CSS sprites. Combine all those social isons into one file and position them using background-position. They all will be downloaded in one go (1 HTTP request)

2. CSS way (images)

Place all images in html and hide hovering

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

in your 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
}

Use 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>

For you:

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

本文标签： javascriptJqueryHow to change img src on hoverStack Overflow