-5

我想模仿这个网站上的一些东西 - http://worldwildlife.org/species

当我将鼠标悬停在动物照片上时，它会得到一个非常酷的叠加层。这只是一个常规的 HOVER 还是更多？不知何故，它对我来说看起来有点花哨和动画，所以我想知道它是一个 jQuery 效果。无论如何，一个比另一个更好吗？对不起，如果问题很愚蠢，只是在这部分没有太多知识。

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

非常感谢！

4

3 回答 3

1

这可以只使用 CSS 来完成，或者您可以使用 jQuery 来获得更多花哨的效果。但是 CSS 过渡和动画非常好，并且完全不需要 javascript 也可以完成很多工作。

于 2013-06-22T02:54:36.090 回答
1

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

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

编辑#2

哎呀，我发布了交换而不是覆盖的链接。叠加也很简单，这里有一个链接：

JQuery 鼠标悬停图像叠加

编辑

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

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

于 2013-06-22T03:01:52.690 回答
0

正如其他人所指出的，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 但是这里的问题是，一旦用户单击图像并将他/她的手指从 :active 伪选择器上抬起，它将被停用，只要图像发生转换，一切都会发生被点击，通常是几分之一秒
  • 使用 jQuery 捕获点击，并相应地打开/关闭覆盖
  • 检测移动用户，并将通过悬停提供给用户的信息推送到图像下方/周围的某处，因此无需悬停/单击。
于 2013-06-22T05:16:07.720 回答