2個元素懸停在jQuery上

Question

腳步 ：

1. 大圖像上的鼠標懸停變為灰色-true

2. 單擊顯示FB圖標的按鈕時-true

但問題是FB ICON不應變成灰色 ，當發生鼠標懸停時，它必須保持其原始顏色為藍色，我為鼠標懸停寫過文章，但不確定為什么它不起作用。

感謝您的幫助！！ 謝謝！

演示

---

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

---

Answer 1

這是更新的小提琴 。 我更新了CSS和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(); } }); 

 .article_videos_item .article_videos_item_img { float: left; border: 1px solid; } .article_videos_item .gray-img:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\\'http://www.w3.org/2000/svg\\'><filter id=\\'grayscale\\'><feColorMatrix type=\\'matrix\\' values=\\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); transition: all .6s ease; -moz-transition: all .6s ease; -webkit-transition: all .6s ease; -webkit-backface-visibility: hidden; /* Fix for transition flickering */ } .socialIconsWrap { position: absolute; top: 20px; left: 20px; } .social__sharing__icon { display: none; width: 40px; height: 40px; cursor: pointer; transition: all .6s ease; -moz-transition: all .6s ease; -webkit-transition: all .6s ease; float: left; padding-left: 50px; } .social__sharing__icon { background: #fff url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-share-48.png') no-repeat; border: 1px solid #f00; } /*.social__sharing__icon:hover { background:url('social_sharing_40x40_hover.png') no-repeat; }*/ .social__sharing__content { width: 200px; height: 38px; float: left; display: none; } .hide__greyout__social { -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; } 

 <div class="article_videos_item clrfix"> <div class="article_videos_item_img"> <span class="field-content"> <a href="/articles/nourish/75-percent-food-products-babies-and-toddlers-contain-too-much-ingredient"> <img class="gray-img" typeof="foaf:Image" src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" width="340" height="226"> <div class="socialIconsWrap"> <div class="social__sharing__icon"> <div class="social__sharing__content"> <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/circle-facebook_-128.png" /> </div> </div> </div> </a> </span> </div> </div> <h4> original FB Icon Colour, should be same on hover, now its turning to grey with Big Image. BG Should be grey only, but not FB ICON.. :-( </br> <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/circle-facebook_-128.png" /> </h4>