问题按钮的位置问题

Question

我对Pin It按钮的位置有一些问题。

我将此cose添加到页面：

<script type="text/javascript" async defer  data-pin-color="red" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

像pinterest在official site中说的那样。

按钮会在悬停时显示，但位置不佳 - 距离顶部很远，就像在此屏幕截图中看到的那样：

我没有找到任何方法通过js或css改变这个位置。

我没有此链接，因为它在我的本地计算机上，但您可以通过此网站和开发工具的屏幕截图看到它：

有人知道这方面的解决方案吗？

Answer 1

你可以用css中的！important覆盖按钮的类或id。我们无法查看哪个类或ID，因为您没有与我们分享HTML代码。想象一下：

$('.play').click(function(){
    var $this = $(this);
    var id = $this.attr('id').replace(/btn/, '');
    $this.toggleClass('active');
    if($this.hasClass('active')){
        $this.text('pause'); 
        $('audio[id^="sound"]')[id-1].play();        
    } else {
        $this.text('play');
        $('audio[id^="sound"]')[id-1].pause();
    }
});

的CSS：

<div class="pinit"></div>

修改

使用伪类，您可以：

.pinit {
     top : 0px !important;
}

这意味着锚类名以pin_it_button_20

结尾

你也可以让它反转

 a[class$="pin_it_button_20"]{ top: 20px!important ;} 

这意味着锚类名以PIN开头