javascript - 我需要帮助使我的 Logo 和社交图标在悬停时不显示

Question

我需要从每个图像中删除我网站上 pinit 按钮的悬停效果。我想从社交图标和 Logo 图像中删除 hover pinit 选项。我的社交图标有悬停效果，我想保留。我在 www.latulipefloraldesigns.com/blog3.html 上有一个测试页面……感谢任何帮助!

HTML.. 我在

的正上方

  <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> 

这是我的 style.css 中的 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;
       }

jQuery 在它自己的文件中。

    (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

在您的 HTML 脚本中，只需像这样定位它:

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

然后它只会定位您的 content ID 中的元素。 它不会定位位于您的页眉或页脚中的内容(即社交媒体图标)。