Question

我正在重新构建我的修饰组合，并且需要一个代码，可以将图像更改为“之前”图像。

我需要this

之类的东西

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

我在网上找到了几个代码，并尝试将它们练习并实现为tumblr主题，但没有一个有效。我发现的一切都让它听起来非常简单易行，我对此非常缺乏经验。

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

Answer 1

让我们说你的图像/ div带有id＆＃34; myImage＆＃34;：

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

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

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

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

Answer 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;
}

Answer 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);
  }

）;

之前＆amp;图像悬停代码后？

3 个答案: