我需要帮助以使我的徽标和社交图标悬停

Question

I need to remove the hover effect of my pinit button on my site from Every Image. I want to remove the hover pinit option from the social icons and logo images. My social icons have a hover effect I would like to keep. I have a test page at www.latulipefloraldesigns.com/blog3.html ... Any help is appreciated!

HTML.. I have this right above the

  <script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.pinit.js"></script>
   <script type="text/javascript">
   $(function () {

  $('img').pinit();

    });
    </script> 

Here is the CSS I have in my style.css

   .pinit .pinit-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:200;
display:none;
background:transparent url('../images/hover-1.png') repeat 0 0;
text-align:center;
     }

      /* button style, and center it */
      .pinit .pinit-overlay a {
position:relative;
top:45%;
left:45%;
margin:-10px 0 0 -21px;
display:block;
width:100px;
height:100px;
background:transparent url('../img/pinit-button.png') no-repeat 0 0;
text-indent:-9999em;
        }

        .pinit .pinit-overlay a:hover {
background-positon: 0 -100px;
       }

        .pinit .pinit-overlay a:active {
 background-position: 0 -100px;
       }

The jQuery is in its own file.

    (function($){

//Attach this new method to jQuery
$.fn.extend({ 

    pinit: function(options) {

        var defaults = {
            wrap: '<span class="pinit"/>',
            pageURL: document.URL
        }       

        var options = $.extend(defaults, options);
        var o = options; 

        //Iterate over the current set of matched elements
        return this.each(function() {

            var e = $(this),
                pi_media = e.data('media') ? e.data('media') : e[0].src,
                pi_url = o.pageURL,
                pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
                pi_isvideo = 'false';
                 bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' +             encodeURI    (pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI (pi_isvideo) + '&description=' + encodeURI(pi_desc);

            var eHeight = e.outerHeight();              
                e.wrap(o.wrap);
                e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a      href="' + bookmark + '" class="pinit-button">Pin It</a></span>');

            $('.pinit .pinit-button').on('click', function () {             
                window.open($(this).attr      ('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');              
                return false;
            });     

            $('.pinit').mouseenter(function () {
                $(this).children('.pinit-overlay').fadeIn(200);
            }).mouseleave(function () {
                $(this).children('.pinit-overlay').fadeOut(200);
            });


        });

    }

});

  })(jQuery);

Answer 1

In your HTML script, just target it like this instead:

$('#content img').pinit();

Then it will only target items that are within your content ID. It will not target things located in your header or footer (ie. social media icons).