-1

我是 Foundation 4 的新手，但我确实有一些以前的编码经验。我正在将我当前的摄影博客 (www.momentaryawe.com/blog) 移动到使用 Foundation 4 的基于 Wordpress 和自定义构建主题的自定义构建主题。

我已经设法让几乎所有东西都按我想要的方式工作，但我被困在下面。如果您查看此链接（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();
    }
);
});

因为 Foundation 4 使用的是 Zepto，它似乎没有悬停选项，所以我被困在如何使用 Foundation 4 做同样的效果。我曾想过可能使用 Orbit 来做这个，但不幸的是我可以让它工作滚下。

4

1 回答 1

0

如果你想使用 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不受支持，因此改为将该代码更改为使用mouseenterand mouseleave。

$(function() { 
  $("#rolloverOriginal ul li")
    .on('mouseenter', function() { 
        $(this).find('p').fadeIn(); 
    })
    .on('mouseleave', function() { 
        $(this).find('p').fadeOut();
    });
});
于 2013-10-30T11:56:26.940 回答