Question

我有黑色和白色版本的8个徽标，我想准备一个带有单个徽标颜色版本的经典悬停效果。我很确定这个效果可以通过几行jQuery代码来完成，但我并没有进步。我只需要将此源中的悬停字母从bw更改为两个方向的颜色（mouseenter / leave）。我想出了这个剧本，但是对于我需要的每一个标识，都需要准备一个新的＆＃34;克隆＆＃34;行：

$('#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 来改变图像内容的想法，因为我不认为这里需要jQuery或JS：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

span {
  display: inline-block;
}

img {
  vertical-align: top;
  transition: 1s;
}

span:hover img {
  opacity: 0;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用纯CSS filter

git checkout <commit> -- filename.ts 
# As git checkout afcd076 -- 1.txt in the example
git commit

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

您可以在自定义<img src="https://i.stack.imgur.com/EUNRw.jpg" class="grey" />前缀属性中保留黑白和彩色图像路径，可以使用data-检索并使用.attr(attributeName, function)设置值

HTML 的

.data(key)

脚本

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

Answer 3

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

然后我选择图像在悬停时添加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

也许试试这个

＆＃13;

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

＆＃13;

li {
    background-repeat: no-repeat;
}

＆＃13;

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

＆＃13;

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 on hover编辑src属性

5 个答案: