Question

我在同一个元素上有两个转换，其中一个按预期工作，但另一个转换不适用于悬停。我能做些什么来使转换工作？

CSS代码：

.ArrowNext
{
    top:40%;
    right:14%;  
    background:rgba(0,0,0,0.7); 
    width:200px;
    height:200px;   
    position:absolute;  
    cursor:pointer;

    transition: right 1s; /* Wont work*/
    transition: background 1s;
}
.ArrowNext:hover
{
    right:11%; /* Wont work*/
    background:rgba(255,255,255,0.7);
}

Answer 1

你的第二个宣言覆盖了第一个宣言。

不是单独声明多个transition，而是将它们一起声明：

transition : right 1s ease-out, background 1s ease-out;

你也应该玩缓和方法。他们真的可以改变＆＃34;感觉＆＃34;动画。

另外，不要忘记供应商前缀：

-webkit-transition : right 1s ease-out, background 1s ease-out;
-moz-transition    : right 1s ease-out, background 1s ease-out;
-o-transition      : right 1s ease-out, background 1s ease-out;
transition         : right 1s ease-out, background 1s ease-out;

以下是transition的一些很棒的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/transition

由于您是CSS新手，因此您应该退房http://caniuse.com，这是确定浏览器兼容性的绝佳资源。

同一元素上的多个转换不起作用

1 个答案: