javascript - 2个元素悬停 ISSUE jQuery

Question

步骤:

1. 大图片上的鼠标悬停变为灰色 - true

2. 点击显示 FB 图标的按钮 - true

但问题是FB ICON 不应该变成灰色，当发生鼠标悬停时它必须保持其原始颜色蓝色，我已经为鼠标悬停而写，但不确定为什么它不起作用。

感谢您的帮助!!谢谢!

DEMO

---

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

这是更新的 fiddle .我更新了 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>