2

这是实现转换的可靠的跨浏览器方式吗？我不知道我做错了什么？

小提琴

html:

<div id="sideBar">
    <ul class="sideMenu">
        <li><a href="#">Beat of the Day</a></li>
        <li><a href="#">Cyborg DB</a></li>
        <li><a href="#">Hadiaris.com</a></li>
        <li><a href="#">DriversEd.com</a></li>
        <li>
            <a href="#">Controlco</a>           
            <ul>
                <li><a href="#">GGP</a></li>
                <li><a href="#">TVA</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS：

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -moz-transform .9s;
    -o-transition: color .9s, -moz-transform .9s;
    transition: color .9s, -moz-transform .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;
}
4

3 回答 3

3

, -moz-transform .9s你需要在过渡声明中去掉。

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s;
    -webkit-transition: color .9s;
    -o-transition: color .9s;
    transition: color .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;
}
于 2013-03-12T17:53:46.483 回答
2

您的transform价值观都在使用该-moz-版本。此外，您的过渡仅在以您拥有它的方式“悬停”时才有效。如果您将转换添加到两个规则，您也将在悬停时获得转换。

更新的小提琴

.sideMenu a {
    display: block;
    width: 150px;
    padding: 5px 5px 5px 10px;
    margin: 0px 0px 0px 10px;
    border-radius: 50px;
    color: black;
    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -webkit-transform .9s;
    -o-transition: color .9s, -o-transform .9s;
    transition: color .9s, transform .9s; 
}
.sideMenu a:hover {
    box-shadow: inset 0px 0px 5px 0px black;
    color: blue;

    -moz-transition: color .9s, -moz-transform .9s;
    -webkit-transition: color .9s, -webkit-transform .9s;
    -o-transition: color .9s, -o-transform .9s;
    transition: color .9s, transform .9s;
}
于 2013-03-12T17:53:16.773 回答
1

您-moz-transform正在引起问题。如果您只想为color属性设置动画，可以将其删除：

    -moz-transition: color .9s;
    -webkit-transition: color .9s;
    -o-transition: color .9s;
    transition: color .9s; 
}

演示：http: //jsfiddle.net/C83Yd/1/

于 2013-03-12T17:54:04.883 回答