jQuery on hover edit src attribute

Question

I have 8 logos in black&white version and I would like to prepare a classic hover effect with color version of a single logo. I am pretty sure that this effect can be done with a few lines of jQuery code but I am not advanced in it. I just need to change on hover letter in this source from bw to color in both directions (mouseenter/leave). I figured out this script but for every single logo I need prepare a new "clone" lines:

$('#footer-company li').on('mouseleave', function() {
   $(this).find('img').attr('src', 'bw-company1.png');
});
$('#footer-company li').on('mouseover', function() {
  $(this).find('img').attr('src', 'color-company1.png');
});

BW version structure:

    <ul id="footer-company">
<li><img src="bw-company1.png" /></li>
<li><img src="bw-company2.png" /></li>
<li><img src="bw-company3.png" /></li>
<li><img src="bw-company4.png" /></li>
<li><img src="bw-company5.png" /></li>
<li><img src="bw-company6.png" /></li>
<li><img src="bw-company7.png" /></li>
<li><img src="bw-company8.png" /></li>
</ul>

COLOR structure

    <ul id="footer-company">
<li><img src="color-company1.png" /></li>
<li><img src="color-company2.png" /></li>
<li><img src="color-company3.png" /></li>
<li><img src="color-company4.png" /></li>
<li><img src="color-company5.png" /></li>
<li><img src="color-company6.png" /></li>
<li><img src="color-company7.png" /></li>
<li><img src="color-company8.png" /></li>
</ul>

Possible duplicate of ["Thinking in AngularJS" if I have a jQuery background?](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — chethu, Mar 14 '18 at 10:17

Temani Afif · Accepted Answer · 2018-03-14T09:55:04.753

Here is an idea with pure CSS to change the content of the image as I don't think jQuery or JS is needed here:

img:hover {
   content:var(--h);
}

<img src="https://i.stack.imgur.com/mpScj.jpg" style="--h:url(https://i.stack.imgur.com/Pnwfk.jpg)">

And if you want some transition you can try this:

span {
  display: inline-block;
}

img {
  vertical-align: top;
  transition: 1s;
}

span:hover img {
  opacity: 0;
}

<!-- span can be replaced with your li -->
<span style="background-image:url(https://i.stack.imgur.com/Pnwfk.jpg)">
<img src="https://i.stack.imgur.com/mpScj.jpg">
</span>

score 0 · Answer 2 · answered Mar 14 '18 at 09:32

You can use pure CSS filter

.grey {
  filter: grayscale(100%);
}

<img src="https://i.stack.imgur.com/EUNRw.jpg" class="grey" />

You can persist black-white and color images path in custom data- prefix attributes which can be retrieved using .data(key) and set value using .attr(attributeName, function)

HTML

<ul id="footer-company">
    <li><img src="bw-company1.png" data-bw="bw-company1.png" data-color="color-company1.png"/></li>
</ul>

Script

$('#footer-company li').on('mouseleave', function() {
    $(this).find('img').attr('src', function(){
        return $(this).data('bw');
    });
});
$('#footer-company li').on('mouseover', function() {
    $(this).find('img').attr('src', function(){
        return $(this).data('color');
    });
});

score 0 · Answer 3 · answered Mar 14 '18 at 09:42

If you're set on using jQuery, I'd recommend looking in to the .hover() function : https://api.jquery.com/hover/

Then I'd select the image add a CSS grayscale filter on hover. So:

$('#footer-company li img').hover(
    function() {
        $(this).css('filter','grayscale(100%)');
    }, function() {
        $(this).css('filter','grayscale(0%)');
  }
);

However, as has been pointed out, you could do this all quite simply with just CSS :hover rule: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

score 0 · Answer 4 · answered Mar 14 '18 at 09:48

Maybe try this

$('li').on('mouseenter', function(){
    $(this).attr('data-src1', $(this).css('background-image'));
    $(this).css('background-image', 'url('+$(this).attr('data-src2')+')');
});
$('li').on('mouseleave', function(){
    $(this).css('background-image', $(this).attr('data-src1'));
});

li {
    background-repeat: no-repeat;
}

<ul id="footer-company">
    <li style="background-image: url(https://placehold.it/100x20);"
        data-src2="https://placehold.it/200x20"></li>
    <li style="background-image: url(https://placehold.it/200x20);"
        data-src2="https://placehold.it/300x20"></li>
    <li style="background-image: url(https://placehold.it/300x20);"
        data-src2="https://placehold.it/400x20"></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

score 0 · Answer 5 · answered Mar 14 '18 at 10:11

Just use the filter: grayscale function:

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

img:hover {
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

note: This is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.

jQuery on hover edit src attribute

5 Answers5