基金会4 - 图像翻转以显示另一个图像

Question

我是基金会4的新成员，但我确实有一些以前的经验编码。我正在将我目前使用基于Wordpress的摄影博客（www.momentaryawe.com/blog）以定制的主题移至使用Foundation 4的定制主题。

我已经设法获得几乎所有的工作，我想要，但我坚持以下。如果你看这个链接（http://www.momentaryawe.com/blog/a-blur-of-colours/），你会注意到我现在的工作方式是当某人翻转图像时，另一幅图像将直接从相机显示出来。这两个图像都是在创建帖子时上传的。这翻车与下面的jQuery代码完成：

$(function() { 
    $("#rolloverOriginal ul li").hover(
    function() { 
     $(this).find('p').fadeIn(); 
    }, 
    function() { 
     $(this).find('p').fadeOut(); 
    } 
); 
}); 

因为基金4是使用的Zepto这似乎不具备悬停选择，我坚持就如何做到使用基金会4相同的效果。我曾想过可能使用Orbit来做这件事，但不幸的是我可以让它在翻车时工作。

Answer 1

如果你想使用jQuery，你可以跳过zepto。如果您使用此代码，然后只需将其更改为包括jQuery的文件，或者使用CDN：

<!-- Check for Zepto support, load jQuery if necessary --> 
<script> 
    document.write('<script src=/js/vendor/' 
    + ('__proto__' in {} ? 'zepto' : 'jquery') 
    + '.js><\/script>'); 
</script> 

变为：

<!-- Check for Zepto support, load jQuery if necessary --> 
<script> 
    document.write('<script src=/js/vendor/jquery.js><\/script>'); 
</script> 

或者一个CDN版本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script> 

由于缺乏浏览器对zepto的支持，我倾向于使用jquery。

更新：我已经包含了jquery v1.10.1，但不支持hover，所以改为使用mouseenter和mouseleave。

$(function() { 
    $("#rolloverOriginal ul li") 
    .on('mouseenter', function() { 
     $(this).find('p').fadeIn(); 
    }) 
    .on('mouseleave', function() { 
     $(this).find('p').fadeOut(); 
    }); 
});