значки социальных сетей исчезают и меняются с помощью JQuery

Question

Я искал вокруг и ничего не нашел, что удивительно из-за того, насколько я вижу этот эффект на веб-сайтах.

Проблема: Социальные логотипы слишком яркие, чтобы их можно было увидеть без столкновения с остальной частью внешнего вида веб-сайта.

Решение: Поверните им цвет остальной части сайта, и когда пользователь на них нависает, они превращают свой обычный славный цвет. (В частности, я хотел получить эффект затухания)

Я могу заставить это работать как простой своп, но мне действительно нравится эффект затухания и думаю, что для дополнительного времени и кода это необходимо.

В любом случае, я также нашел решение, которое работает с одним изображением, но теперь моя проблема в том, что пользователь наводит на одно изображение, все изображения меняются. Я хочу настроить их индивидуально, и я сделал это, используя $ (это), но он все еще не работает.

Я пытался несколько неудачных попыток, и вот мое последнее:

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> 

В каждом элементе списка У меня есть вверх и над изображением. Примечание. Мне пришлось помещать неперекрывающиеся пробелы в каждый элемент списка, чтобы он распознал абсолютное позиционирование (сверху: 0 слева: 0) изображений в CSS. В противном случае все элементы сложены друг над другом. Хлоп!

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 У меня есть абсолютное позиционирование с классом над установленным для отображения ни так над изображение не отображается при загрузке страницы первоначально. Я использую JQuery, чтобы показать его при наведении.

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