jQuery 悬停时编辑 src 属性

Question

我有 8 个黑白版本的徽标，我想用单个徽标的彩色版本准备一个经典的悬停效果。我很确定这种效果可以用几行 jQuery 代码来完成，但我在这方面并不先进。我只需要将此源中的悬停字母从 bw 更改为双向颜色 (mouseenter/leave)。我想出了这个脚本，但对于每个徽标，我都需要准备一个新的 "clone" 行：

$('#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 版本结构：

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

颜色结构

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

Answer 1

你可以使用纯 CSS filter

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

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

您可以在自定义 data- 前缀属性中保留 black-white 和彩色图像路径，这些属性可以使用 .data(key) 检索并使用 .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>

脚本

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

Answer 2

这里有一个 pure CSS 的想法来改变图像的内容，因为我认为这里不需要 jQuery 或 JS：

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

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

如果你想要一些过渡，你可以试试这个：

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>

Answer 3

如果您打算使用 jQuery，我建议您查看 .hover() 函数：https://api.jquery.com/hover/

然后我 select 图像在悬停时添加 CSS 灰度滤镜。所以：

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

但是，正如已经指出的那样，您只需使用 CSS :hover 规则就可以非常简单地完成所有这些操作：https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Answer 4

也许试试这个

$('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>

Answer 5

只需使用filter: grayscale函数：

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

注意： Internet Explorer、Edge 12 或 Safari 5.1 及更早版本不支持此功能。

jQuery 悬停时编辑 src 属性

jQuery on hover edit src attribute

html

css

jquery

src