Javascript 2元素悬停问题jQuery

步骤：

大图像上的鼠标悬停变为灰色-正确

点击显示FB图标的按钮-真

但是问题是FB图标不应该变成灰色，当鼠标悬停时，它必须保持原来的蓝色， 我为mouseover写过信，但不确定为什么它不起作用

谢谢你的帮助！！ 谢谢

$(function(){
    gwt__features.init();
});
var social__hover__select       = $('.article_videos_item .article_videos_item_img'),
    social__sharing__icon       = $('.socialIconsWrap .social__sharing__icon'),
    social__sharing__content    = $('.social__sharing__content');


var gwt__features = ({
    social__hover : function(){
        $(social__hover__select).on('mouseover',function(){
            //$(social__sharing__icon).show();
            $(this).find('.social__sharing__icon').show();
        });
    },
    social__out : function(){
        $(social__hover__select).on('mouseout',function(){
            $(social__sharing__icon).hide();
            $(social__sharing__content).hide();
        });
    },
    social__click : function(){
        $(social__sharing__icon).on('click',function(e){
            e.preventDefault();
            $(social__sharing__content).show();

            $(social__sharing__icon).on('mouseover',function(){
                //alert('asd');
                $(social__sharing__content).show();
            });
            $(social__sharing__content).on('mouseover',function(){
                console.log($(this));
                $(this).css ({
                    'border' : '1px solid #f00',
                    '-ms-filter' : 'progid:DXImageTransform.Microsoft.gradient(enabled=false)',
                    'filter' : 'none',
                    '-webkit-filter': 'none(100%)'                      
                })

            })
        });
    },
    init : function(){
        this.social__hover(),
        this.social__out(),
        this.social__click();
    }
});

---

JS:

$(function(){
    gwt__features.init();
});
var social__hover__select       = $('.article_videos_item .article_videos_item_img'),
    social__sharing__icon       = $('.socialIconsWrap .social__sharing__icon'),
    social__sharing__content    = $('.social__sharing__content');


var gwt__features = ({
    social__hover : function(){
        $(social__hover__select).on('mouseover',function(){
            //$(social__sharing__icon).show();
            $(this).find('.social__sharing__icon').show();
        });
    },
    social__out : function(){
        $(social__hover__select).on('mouseout',function(){
            $(social__sharing__icon).hide();
            $(social__sharing__content).hide();
        });
    },
    social__click : function(){
        $(social__sharing__icon).on('click',function(e){
            e.preventDefault();
            $(social__sharing__content).show();

            $(social__sharing__icon).on('mouseover',function(){
                //alert('asd');
                $(social__sharing__content).show();
            });
            $(social__sharing__content).on('mouseover',function(){
                console.log($(this));
                $(this).css ({
                    'border' : '1px solid #f00',
                    '-ms-filter' : 'progid:DXImageTransform.Microsoft.gradient(enabled=false)',
                    'filter' : 'none',
                    '-webkit-filter': 'none(100%)'                      
                })

            })
        });
    },
    init : function(){
        this.social__hover(),
        this.social__out(),
        this.social__click();
    }
});

---

以下是更新的。我更新了css和js

$（函数（）{
gwt__features.init（）；
});
var social\uuuuu hover\uuuuu select=$（'.article\u videos\u item.article\u videos\u item\u img'），
社交共享图标=$（'.socialConswrap.social共享图标'），
社交共享内容=$（“.social共享内容”）；
变量gwt\uuuu特征=({
社会悬停：函数（）{
$（社交悬停选择）。在（'mouseover'，function（）上{
//$（社交共享图标）.show（）；
$（this.find（'.social__共享__图标'）.show（）；
});
},
社会输出：函数（）{
$（社交鼠标悬停选择）。在（'mouseout'，function（）上{
$（社交共享图标）.hide（）；
$（社交共享内容）.hide（）；
});
},
社会点击：函数（）{
$（社交共享图标）。在（'点击'）上，功能（e）{
e、 预防默认值（）；
$（社交共享内容）.show（）；
$（社交共享图标）。在（'mouseover'，function（）上{
//警报（“asd”）；
$（社交共享内容）.show（）；
});
/*$（社交共享内容）。on（'mouseover'，function（）{
log（$（this））；
$（this.css）({
“边框”：“1px实心#f00”，
“-ms筛选器”：“progid:DXImageTransform.Microsoft.gradient（enabled=false）”，
“筛选器”：“无”，
“-webkit筛选器”：“无（100%）”
})
})*/
});
},
init:function（）{
此.social\uuuuuu hover（），
这是一个社交网站，
这是。社会点击（）；
}
});
.article\u videos\u item.article\u videos\u item\img{
浮动：左；
边框：1px实心；
}
.文章\视频\项目。灰色图像：悬停{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
过滤器：灰色；
-webkit过滤器：灰度（100%）；
过渡：全部。6秒轻松；
-moz过渡：所有.6秒轻松；
-webkit过渡：所有.6s轻松；
-webkit背面可见性：隐藏；
/*修正转换闪烁*/
}
{
位置：绝对位置；
顶部：20px；
左：20px；
}
.社交共享图标{
显示：无；
宽度：40px；
高度：40px；
光标：指针；
过渡：全部。6秒轻松；
-moz过渡：所有.6秒轻松；
-webkit过渡：所有.6s轻松；
浮动：左；
左侧填充：50px；
}
.社交共享图标{
背景：#fff url（'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-share-48.png")不重复;；
边框：1px实心#f00；
}
/*.社交共享图标：悬停{
背景：url（'social_sharing_40x40_hover.png'）不重复；
}*/
.社交共享内容{
宽度：200px；
高度：38px；
浮动：左；
显示：无；
}
.隐藏\uu greyout\uu社交{
-ms过滤器：“progid:DXImageTransform.Microsoft.gradient（enabled=false）”；
}

原来的FB图标颜色，应该是相同的悬停，现在它变成灰色的大形象。
背景应仅为灰色，而非FB图标..：-(


嘿，Kumar，tnx，但是背景应该是灰色的，只是它不应该改变。你的意思是，当鼠标悬停在这个块上时，背景不会是灰色的。我已经发布了JSFIDLE。改变css在img上添加了类。你有什么发现吗？