Question

我想模仿本网站的一些内容 - http://worldwildlife.org/species

当我将鼠标悬停在动物照片上时，它会变得非常酷。这只是一个普通的HOVER还是更多的东西？不知怎的，它看起来有点花哨和动画给我，所以我想知道它是一个jQuery效果而不是。无论如何，一个比另一个好吗？对不起，如果问题很愚蠢，就这部分了解不多。

制作移动版时，处理悬停类型效果的最佳方法是什么？

非常感谢！

Answer 1

这可以仅使用CSS来完成，或者您可以使用jQuery来获得更多花哨的效果。但CSS转换和动画非常好，并且可以完成很多，而不需要javascript。

Answer 2

正如凯尔所说，有很多方法可以完成这项任务。最简单（也是最符合浏览器）的方式可能是做一个简单的jQuery悬停效果 - 当图像悬停在上面时，另一个图像出现并在其上方淡入淡出。当然，第二个图像很可能是透明的PNG，这使得它看起来像是原始图像变形。

jQuery中有很多这样的实现 - 快速谷歌搜索产生了几个结果。以下是一些SO帖子，例如：

编辑＃2

糟糕，我发布了交换链接，而不是叠加。叠加层也很简单，这里有一个链接：

JQuery mouseover image overlay

修改

This StackOverflow answer使用CSS3而不是jQuery。但是，正如评论者指出的那样，根据您的要求，这可能不适用于您需要支持的浏览器。

关于您的第二个问题，关于移动环境 - 我建议您忽略网站的任何移动版本的悬停效果。这样，您就专注于提供内容，这比移动设备上的UI效果更重要。如果你想仍然有一些效果，你可以检测到iOS / Android / WP8 / etc用户代理，并将悬停效果改为图像链接的a:active效果。

Answer 3

正如其他人所指出的，jQuery 可以用来达到你想要达到的目的。
如果您正在寻找仅CSS解决方案没有键入任何JavaScript，但费用不包括对旧浏览器的支持，这是一个解决方案： http://jsfiddle.net/JtKR5/5/

#img-holder{
    position:relative;
    display:inline-block;

}

#img-holder:hover:after {
    font-family:verdana;
    content:"Overlay Content";
    color:white;
    background-color:rgba(0,0,0,0.5);
    top:0;
    left:0;
    position:absolute;
    box-sizing:border-box;
    padding-top:150px;
    text-align:center;
    width:100%;
    height:100%;
    -webkit-animation:trans 300ms;
    transition:trans 300ms;
}

@-webkit-keyframes trans {
    from { opacity:0}
    to {opacity: 1} 
}

@keyframes trans {
    from { opacity:0}
    to {opacity: 1} 
}

回答关于移动设备使用的第二个问题这些转换是基于悬停的，您有几个选项：

正如autibyte所指出的那样你可以使用：但是这里的问题是活跃的一旦用户点击图像并抬起他/她的手指就是这样：active伪选择器将被停用，有转换和只要点击图像，一切都会发生，这就是通常是一小时一秒
使用jQuery捕获点击次数，并相应地打开/关闭叠加层
检测移动用户，并推送将要提供给的用户的信息用户将鼠标悬停在图像下方/周围的某个位置，从而删除需要悬停/点击。

这是怎么做到的？

3 个答案:

编辑＃2

修改