我正在尝试创建一个滑动 div,当您将鼠标悬停在 div 上时,它会从右侧进入。它适用于 Chrome,但不适用于 firefox ...我错过了什么?它在 Chrome 和 Safari 中正常工作......
http://jsfiddle.net/mwilday/MVw57/1/
CSS:
.gettingstarted {
-ms-transform: translate(200px, 0px);
/* IE 9 */
-webkit-transform: translate(200px, 0px);
/* Safari and Chrome */
-moz-transform: translate(200px, 0px);
transform: translate(200px, 0px);
background: rgba(0, 0, 0, .8);
}
.gettingstarted:hover {
-webkit-transition: .8s;
-moz-transition: .8s;
transition: .8s;
transition-timing-function: ease-in-out;
-ms-transform: translate(0px, 0px);
/* IE 9 */
-webkit-transform: translate(0px, 0px);
/* Safari and Chrome */
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
HTML:
<div id="frontpagetile">
<div class="gettingstarted">
<p style="text-align: left;">Getting Started</p>
<ul>
<li style="text-align: left;"><a href="http://www.google.com">Link</a>
</li>
<li style="text-align: left;"><a href="http://www.google.com"><span style="line-height: 1.231;">Link</span></a>
</li>
<li style="text-align: left;"><a href="http://www.google.com"><span style="line-height: 1.231;">Link</span></a>
</li>
</ul>
</div>
</div>
最佳答案
您的 fiddle 在 .gettingstarted 元素上使用了 :hover 选择器,这是不可见的。将选择器 .gettingstarted:hover {}
更改为 #frontpagetile:hover .gettingstarted {}
,以便在悬停父元素时发生悬停更改。
关于CSS 滑动 div(过渡/转换在 Firefox 25.0.1 中不起作用),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20254643/