Pin It 按钮的位置问题
Issue With Position of Pin It button
我对 Pin It 按钮的位置有一些疑问。
我将此内容添加到页面:
<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 来改变这个位置。
我没有 link 因为它在我的本地机器上,但你可以通过这张网站和开发工具的截图看到它:
有人知道这个的解决方案吗?
您可以用 css 中的 !important 覆盖 class 或按钮的 ID。我们看不到 class 或 id 是什么,因为您没有与我们分享 HTML 代码。想象一下:
<div class="pinit"></div>
css:
.pinit {
top : 0px !important;
}
编辑
使用伪classes 你可以:
a[class$="pin_it_button_20"]{ top: 20px!important ;}
表示class名字以pin_it_button_20
结尾的主播
你也可以让它反转
a[class^="PIN"]{ top: 20px!important ;}
表示class名字以PIN码开头的主播
我对 Pin It 按钮的位置有一些疑问。
我将此内容添加到页面:
<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 来改变这个位置。
我没有 link 因为它在我的本地机器上,但你可以通过这张网站和开发工具的截图看到它:
有人知道这个的解决方案吗?
您可以用 css 中的 !important 覆盖 class 或按钮的 ID。我们看不到 class 或 id 是什么,因为您没有与我们分享 HTML 代码。想象一下:
<div class="pinit"></div>
css:
.pinit {
top : 0px !important;
}
编辑
使用伪classes 你可以:
a[class$="pin_it_button_20"]{ top: 20px!important ;}
表示class名字以pin_it_button_20
结尾的主播你也可以让它反转
a[class^="PIN"]{ top: 20px!important ;}
表示class名字以PIN码开头的主播