- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我希望两者的行为都像 webkit,但出于某种原因,webkit 的工作方式与我预期的一样,但是 -moz- 在鼠标移出 .porftolio 元素时执行动画,
知道为什么吗?
CSS:
.portfolio-item {
float: left;
width: 300px;
height: 300px;
margin: 0.5%;
position: relative;
text-align: center;
background: orange;
overflow: hidden;
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.portfolio-item a:hover:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
.portfolio-item h4, .portfolio-item img {
-webkit-transition: 0.4s all ease;
-moz-transition: 0.4s all ease;
transition: 0.4s all ease;
}
.portfolio-item img {
width: 100%;
hegight: 100%;
position: absolute;
top: 0;
left: 0;
}
.portfolio-item:before {
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
height: 100%;
vertical-align: middle;
}
.portfolio-item h4 {
opacity: 0;
color: white;
font-size: 30px;
vertical-align: middle;
/*@include transform(scale(.5));*/
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
/* sino en safari no va */
width: 200px;
font-weight: bold;
text-transform: uppercase;
-webkit-transform: translateX(-2px);
-moz-transform: translateX(-2px);
-ms-transform: translateX(-2px);
transform: translateX(-2px);
}
.portfolio-item:hover {
z-index: 9;
}
.portfolio-item:hover img {
opacity: 0;
-webkit-transform: scale(1.07);
-moz-transform: scale(1.07);
-ms-transform: scale(1.07);
transform: scale(1.07);
}
.portfolio-item:hover h4 {
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
/*-webkit-animation-duration: 0.4s;
-webkit-transform-origin:50% 50%;
-webkit-animation-timing-function: linear;
-moz-animation-duration: 0.4s;
-moz-transform-origin:50% 50%;
-moz-animation-timing-function: linear;
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;*/
opacity: 1;
}
HTML:
<ul><li class="portfolio-item" style="background-color: #6220E5;">
<a href="#">
<img src="http://dummyimage.com/300x300/dddddd/cccccc" alt="camper" />
<h4>Text goes here</h4>
</a>
</li></ul>
测试: http://jsfiddle.net/kuX39/
-编辑-
有趣的是,我注意到如果不是将它应用于 :hover,而是将它应用于 .hover 并切换类,那么动画效果相同...... :S
最佳答案
问题出在这条规则上:
.portfolio-item a:hover:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
仅在悬停状态下定义所有后伪元素。如果 a 元素未悬停,则伪元素未定义,可以采用浏览器决定的任何值。
如果您在未悬停的元素上设置相同的内容,则效果很好。
.portfolio-item a:after {
content: " ";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.4), transparent 100%);
}
顺便说一下,我的 firefox 版本使用的是 transition 而不是 moz-transition
关于css3 过渡 : firefox makes on hover out and chrome in hover in,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17573641/
我已经为桌面和移动 Firefox 开发了一些 Firefox 插件(扩展),但现在我无法将插件/扩展安装到在 Firefox OS 中运行的浏览器中(我正在使用模拟器插件)。请注意,我不想创建一个传
可以将选项卡/网址从移动 Firefox 发送到桌面 Firefox 浏览器,但是否可以以相反的方式执行此操作?从桌面版 Firefox 到移动版 Firefox,并像其他方向一样自动加载。我找不到除
我想等待 Firefox-Browser-Events (sessionstore-windows-restored, user-interaction-inactive,..) 以清除历史记录。我的
我在公司网络中,想为 Firefox 安装一些开发人员工具。不幸的是,政策禁止 Firefox 直接访问互联网,但还有其他浏览器可以访问互联网。现在:如何在没有 Firefox 的情况下直接下载 xp
是否有用于在 firefox 中执行选择性缓存的插件或方法?我可以disable caching entirely ,但我仍然希望能够缓存一些需要几秒钟才能加载的大型 javascript 库 (ex
我目前正在将 Chrome 扩展程序转换为 Firefox 插件,并希望复制 chrome.storage.sync 功能。 但是,我无法使用 simple-storage 找到是否由 Firefox
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
所以,我使用这个代码: var options = { enableHighAccuracy: true, timeout: 2000, maximumAge: 100 }; navi
有没有办法打开 Firefox 并强制它在启动时加载临时加载项(webextension)?通常我必须手动去about:debugging并选择我硬盘上的扩展名。我正在寻找一个可以在加载 Firefo
我正在密切关注教程 here当我尝试创建 Firefox 扩展时。我的扩展有以下树: backtosearch +-chrome +-content backtosearch.
如何从代码中正确地重启 firefox(没有任何“恢复 session ”的东西并且使用与以前相同的窗口)? 我知道 bash 脚本进程中“firefox-bin”的 pid,并且我已将自定义插件加载
自从 Firefox 的最后几次更新以来,我们心爱的 Firebug 已集成到 Firefox 开发人员工具中,并且包括我在内的很多人 don't like what happened到 Firebu
当你在某处上传图片时,在使用chrome时,你可以看到状态栏实际上显示了上传的“状态”,即上传完成的百分比。 Firefox 的状态栏有没有办法显示这个上传状态? 最佳答案 用谷歌搜索这个,发现这个:
例如 Chrome 保存在这里:~Library/Application Support/Google/Chrome/Default/Current Tabs和 Safari 在这里 ~/Librar
当火狐开发者版推出时,我很高兴,我可以使用WebIde、响应式设计工具、滴管等……今天我受够了。 里面有很多bug,我就不一一列举我和我的同事发送和批准了多少bug了…… 我在 google 中搜索过
我在 Ubuntu 上使用 Firefox,版本 39.0。我正在尝试调试一个附加组件,并希望在 chrome 权限下运行一些 JavaScript。根据 this page我应该能够在浏览器控制台中
几天前,我更改了我的网站的图标:打开网站后,它可以很好地工作: 我的网站也在我的书签中,但是显示了旧的收藏夹图标: 我已经看过here,但是答案并没有解决我的问题。 解决方法可能非常简单,但是到目前为
我正在使用web API从Firefox开发一个 native 消息传递应用程序。该扩展应该调用一个解析stdin的应用程序,然后基于它解析的一些数据调用我的另一个rust应用程序,但是出于显而易见的
在 Firefox 中有插件和扩展。你能解释一下为什么这些插件有不同的名称和标签吗?它们是否差异如此之大,以至于需要不同的名称?我认为区分这些东西有点不自然,扩展具有越来越多的功能,与插件相比它们缺少
我正在使用附加构建器和附加 SDK 编写 Firefox 扩展。到目前为止,我已经能够解决任何限制,而无需迁移到 XUL。但是,我遇到了障碍。 我的扩展程序有一个长时间运行的进程,可能会阻塞,因此我需
我是一名优秀的程序员,十分优秀!