Pinterest 图像按钮妨碍了我的 :hover css答案

【问题标题】：Pinterest image button getting in the way of my :hover cssPinterest 图像按钮妨碍了我的 :hover css
【发布时间】：2015-05-08 10:57:01
【问题描述】：

我有一些这样的伪代码：

<div class="container">
    <div class="hiddenatfirst">
      <img>
      <img>
      <img>
    </div>
</div>

css 像这样：

.hiddenatfirst{
display:none;
}

.container:hover .hiddenatfirst{
display:block;
}

.hiddenatfirst:hover{
display:block;
}

问题是 - 我有一个设计网站，很多访问者都安装了 pinterst 扩展程序。当有人将鼠标悬停在添加到 .hiddenatfirst div 内的图像中的 pin-it 按钮上时，该 div 将再次隐藏。

我不想从图像中删除 pin-it 按钮，但我不希望它们妨碍 :hover 事件。

有什么想法吗？

对伪代码表示歉意，真正的代码非常混乱且处于暂存状态！希望这能解释我需要什么。

谢谢

PS - 如果您在此处查看导航中的 .third-level-menu，您会看到它正在运行（请注意，您需要安装 pinterest chrome 扩展程序）

http://smith-hoyt.myshopify.com/?preview_theme_id=12397927

PPS - 这是一个糟糕的 GIF，但我认为也显示了正在发生的事情：

http://recordit.co/anNtu8W1Vo

PPPS - 您可以看到 pinterest 在此图像中添加到每个图像的 pin-it 按钮：https://twitter.com/tomcritchlow/status/573920066124836864/photo/1

【问题讨论】：

如果您查看此处的导航，您会看到它的实际效果：smith-hoyt.myshopify.com/?preview_theme_id=12397927
你能找出并揭露，当添加pinterest图标时，html是如何构造的吗？

标签： css hover pinterest

【解决方案1】：

不要使用上面的 javascript 解决方案，因为这些图像很小，并且在导航中我找到了删除 pin-it 按钮的方法，只需添加到每个图像：

nopin="nopin"

根据此处的文档：

https://developers.pinterest.com/on_hover_pin_it_buttons/

【讨论】：

【解决方案2】：

问题很可能是“Pin it”按钮绝对位于图像的顶部，但它不是容器的子元素，因此将鼠标悬停在它上面会隐藏图像，如下例所示：

.container {
  display: block;
  width: 500px;
  height: 315px;
  background-color: gray;
}
.hiddenatfirst {
  display: none;
}
#pinit {
  position: absolute;
  top: 32px;
  left: 32px;
}
.container:hover .hiddenatfirst {
  display: block;
}
.hiddenatfirst:hover {
  display: block;
}

<div class="container">
  <div class="hiddenatfirst">
    <img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
  </div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />

您可以做的是使用 JavaScript 或 jQuery 找到所有“Pin it”按钮并将它们移动到适当的容器中并重新计算位置，因此结果 HTML 将如下所示：

.container {
  display: block;
  width: 500px;
  height: 315px;
  background-color: gray;
}
.hiddenatfirst {
  display: none;
}
#pinit {
  position: absolute;
  top: 32px;
  left: 32px;
}
.container:hover .hiddenatfirst {
  display: block;
}
.hiddenatfirst:hover {
  display: block;
}

<div class="container">
  <div class="hiddenatfirst">
    <img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
    <img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
  </div>
</div>

【讨论】：