CSS 滑动 div（转换/转换在 Firefox 25.0.1 中不起作用）

Posted 2023-03-06

【中文标题】CSS 滑动 div（转换/转换在 Firefox 25.0.1 中不起作用）

【英文标题】：CSS sliding div (Transition / Transform not working in Firefox 25.0.1)

【发布时间】：2013-12-13 19:31:27

【问题描述】：

当您将鼠标悬停在 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>

【问题讨论】：

我刚刚测试了它.. 它似乎在 FF 中工作。

夜间 28，工作正常

在 FF 为我工作。

错误的小提琴... :( jsfiddle.net/mwilday/MVw57/1

【参考方案1】：

您的小提琴在 .gettingstarted 元素上使用 :hover 选择器，该元素不可见。将选择器 .gettingstarted:hover 更改为 #frontpagetile:hover .gettingstarted 以便在父元素悬停时发生悬停更改。