Question

我已经四处寻找并且没有找到任何东西，这是令人惊讶的，因为我在网站上看到这种效果的常见程度。

问题：社交徽标太丰富多彩，无法与网站外观的其他部分发生冲突。

解决方案：将它们转换为网站其余部分的颜色，当用户将鼠标悬停在网站上时，它们会变成通常的光彩。（具体来说，我想要一个淡入淡出效果）

我可以将它作为一个简单的交换工作，但我真的非常喜欢淡入淡出效果，并认为值得花费额外的时间和代码来使它正确。

无论如何，我还找到了一个适用于单个图像的解决方案，但现在我的问题是当用户将鼠标悬停在一个图像上时，所有图像都会发生变化。我想单独定位它们并且我已经使用$（this）这样做但它仍然无法正常工作。

我尝试过多次尝试失败，这是我的最新尝试：

html：

<div id="social">
<ul>
<li><a href="http://skype.com/yourid" target="_blank"><img class="up" src="images/icon_skype_blk.png" alt="social media icon">
<img class="over" src="images/icon_skype_over.png" alt="social media icon"></a>&nbsp;</li>
<li><a href="http://vimeo/.com/yourid" target="_blank"><img class="up" src="images/icon_vimeo_blk.png" alt="social media icon">
<img class="over" src="images/icon_vimeo_over.png" alt="social media icon"></a>&nbsp;</li>
<li><a href="http://youtube.com/yourid" target="_blank"><img class="up" src="images/icon_youtube_blk.png" alt="social media icon">
<img class="over" src="images/icon_youtube_over.png" alt="social media icon"></a>&nbsp;</li>
</ul>
</div>

在每个列表项中，我都有一个up和over图像。注意：我必须在每个列表项中放置非中断空格，以使其识别CSS中图像的绝对定位（顶部：0左：0）。否则，所有元素都会堆叠在一起。哎呀！

CSS：

#social ul li {
        display: inline;
        float: right;
        position: relative;
        width: 31px;
    }

img.up {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 26px;
        height: 26px;
        z-index: 1;
    }

img.over {
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
        width: 26px;
        height: 26px;
        z-index: 2;
    }

在CSS中我有绝对定位，上层设置为none，因此当页面最初加载时，不显示过图像。我使用Jquery在悬停时显示它。

JQuery：

$('img.up').hover(
    function(){
        $(this).stop()
        $(this).fadeOut()
        $('img.over').fadeIn()
    },  
    function (){
        $(this).stop()
        $(this).fadeOut()
        $('img.up').fadeIn()                  
    }
);

现在，这个jquery将所有图像淡化为过度（彩色）状态。然后即使你搬出去也会这样。我已经能够做到其他事情，但没有任何类似于我想要的东西。（当用户将鼠标悬停在每个图像上时，淡出淡出）。

如果有人能提供帮助，我们将不胜感激。这是第3天，我还没有找到我正在寻找的解决方案。

Answer 1

现在，这个jquery将所有图像淡化为过度（彩色）状态

这是因为你在所有图像中都在做动画。 $('img.over').fadeIn()

然后即使你搬出也是这样

因为您逐渐淡出$(this)引用$('img.up')

我建议在hover()上调用<a>，看看是否有效：

html：（删除了可读性的内容）

<a class="image"><img class="up" src="" alt=""><img class="over" src="" alt=""></a>

<强> JQ：

$('.image').hover(
    function(){ $(this).find('.up').fadeOut().end().find('.over').fadeIn(); },  
    function(){ $(this).find('.over').fadeOut().end().find('.up').fadeIn(); }
);

Answer 2

您需要通过添加上下文来使img.over相对于当前图像。试试这个：

$('img.up').hover(
    function(){
        $(this).stop().fadeOut() // Chain your function calls to reduce selectors
        $('img.over', $(this).parent()).fadeIn()
    },  
    function (){
        $('img.over', $(this).parent()).stop().fadeOut()
        $(this).fadeIn()                  
    }
);

社交媒体图标淡化和交换效果与Jquery

2 个答案: