2个元素悬停ISSUE jQuery

时间:2015-03-09 06:34:59

标签: javascript jquery css3

步骤:

  1. 鼠标悬停在大图像上变为灰色 - 真实

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

  3. 但问题是 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();
        }
    });
    

1 个答案:

答案 0 :(得分:2)

以下是更新后的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)";
}
&#13;
<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>
&#13;
&#13;
&#13;