仅在具有指定类的图像上显示Pinterest悬停按钮

Question

客户希望将鼠标悬停在网站上的某些图像上.我查看了Pinterest网站上的文档,只能找到如何将所有图像设置为pinit,并可选择使用CSS类关闭一些图像.但这意味着网站上95%的图像都必须有一个nopin类.

有没有办法可以将类应用于像"pinthis"这样的图像,这样只有它们才能连接到pinit按钮.我注意到你可以在Wordpress上做这样的事情,但这是一个自定义构建的网站.

提前致谢!

编辑:

这是我在头文件中添加的代码,如上面的Pinterest开发人员链接中所述:

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

这基本上将页面上的所有图像设置为具有pinit按钮,但我需要它们仅应用于具有特定类的图像

Answer 1

因此,在jQuery中执行此操作的一种方法是默认情况下将所有图像设置为具有以下属性:

data-pin-no-hover="true"

这个jQuery就是:

 $("img").attr("data-pin-no-hover", true);

然后在下面你可以有一个额外的行,将你想要删除属性的特定类的值更改为false:

$(".pinit_img").removeAttr("data-pin-no-hover");

Answer 2

很抱歉回答我自己的问题，但这就是我克服问题的方法。我刚刚编写了一些 JavaScript，它使用“pinthis”类查找图像，并将属性 nopin="true" 应用于其他所有内容。

我暂时不会勾选这个答案，因为可能有一种官方方法可以做到这一点，而不必将 nopin="true" 应用于所有内容......但它似乎越来越不可能。

就个人而言，这对 Pinterest 来说有点令人失望，因为您当然应该只告诉您确实想要拥有它的项目，而不是浪费时间遍历所有不想要的项目。对我来说，这似乎是一种浪费的标记。

无论如何，我就是这样做的：

<script type="text/javascript">
    $(document).ready(function(){
        $("img").each(function(){
            if(!$(this).hasClass("pinthis")){
                $(this).attr("nopin", "true");
            }
        });
    });
</script>