图像悬停代码之前和之后？ [关闭]答案

【问题标题】：Before & After Image Hover Code? [closed]图像悬停代码之前和之后？ [关闭]
【发布时间】：2014-05-21 14:49:48
【问题描述】：

我正在重新制作我的修饰作品集，并且需要一个代码，将鼠标悬停在上面时将图像更改为“之前”图像。

我需要this 之类的东西

但是，我并不是从头开始构建这个网站。我将使用 4ormat、Cargocollective、Squarespace、Prosite 或任何其他支持我需要的代码的东西。

我在网上找到了几个代码，并尝试将它们练习并实现到 tumblr 主题中，但没有一个有效。我发现的一切听起来都非常简单易做，我只是在这方面非常缺乏经验。

所以基本上我需要一个可以在投资组合网站中实现的代码，因此当我将鼠标悬停在照片上时，它会转到之前的照片。希望这里有人可以提供帮助。非常感谢。

【问题讨论】：

添加你尝试过的小提琴。
这并不难，只需使用2张相互叠加的图像，它们都包含在同一个父级中，:hover应该应用于父级，也可以应用于一个图像，但要隐藏图像，您必须使用不透明度...
我尝试做this one 和一些类似的，但它们似乎没有用。可能是因为我在 Tumblr 中尝试过它们，但它不支持它。但如果他们不支持，我不想为投资组合付费并在那里尝试。这把我带到了这里！
@KingKing 网上每个人都这么说，但我无法让它工作。如果您能给我一个示例代码来说明您的意思，我将不胜感激，因为我只知道基本的 HTML/CSS。对不起，我缺乏这方面的知识。

标签： jquery html css hover

【解决方案1】：

假设您的图像/div 的 ID 为“myImage”：

<div id="myImage"> </div>

在 CSS 中，您既可以定义图像未悬停时的路径，也可以定义悬停时的路径：

#myImage
{
background-image: url("oldpath");
}

#myImage :hover
{
background-image: url("newpath");
}

【讨论】：

我可以在预制主题中进行编辑，然后将其应用于我网站上的所有图像吗？
我不知道那个预制主题，但你应该可以添加代码，不是吗？是的，您必须为要在悬停时更改的每张图像都这样做...

【解决方案2】：

由于您的照片是主要内容，因此您应该避免使用背景图片。如果之前和之后总是相同的维度，那么我们可以让它变得非常简单。

拉小提琴 - Fiddle Link!

HTML

<div class="photo">
    <img src="http://placehold.it/500x500" class="before" />
    <img src="http://placehold.it/500/FF0000" class="after" />
</div>

CSS

.photo {
    position: relative;
}
.photo .after {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.photo .before:hover + .after, .after:hover {
    display: block;
}

【讨论】：

是的！这正是我需要的。现在，您对我将在哪里将该代码实施到已经预先制作的主题中以使其适用于整个站点有什么建议吗？我希望我现在有代码可以给你看，但我还没有为我的投资组合网站付费。
我稍微编辑了我的答案。将任何名称的类应用于 div 并专门针对它。在您的样式 CSS 文件中，将此 CSS 的 sn-p 放在底部，应该没问题 :) 如果有冲突，您只需要在这些 CSS 样式中覆盖它们即可。
太棒了！真的很感激。我会尽可能尝试一下，希望它对我有用。如果我感到困惑，我会回到这里。
这些主题通常会有类似styles.css 的内容，可以轻松添加或更改。请记住，每组前后照片都需要在自己的div中。

【解决方案3】：

试试这个：

你可以在任何地方使用它。也适用于动态图像。

Demo

HTML

<div>
<img width="200" src="http://t3.gstatic.com/images?q=tbn:ANd9GcTQvh3lPZDFKZQ-EXNHfK-YuyeUNque_YuZSuMIWw0i0QPziuFG" data-hover="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ74BKYRIOhmeSFtyNzP_tgf-rjeUTykfXQQ8tY_xwn3GXF_6fW"/>

jQuery

$( "img" ).hover(
function() 
  {
      var $originalimg = $(this).attr("src"); 
      var $secimage    = $(this).attr("data-hover");
      $(this).attr("src",$secimage);
      $(this).attr("data-hover",$originalimg);
  }, 
  function() 
  {
       $(this).attr("src",$originalimg);
  }

);

【讨论】：