基金會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(); 
    }); 
});