2014-01-21 43 views
2

我刚刚注意到一些CSS3转换已停止在Chrome中工作(几周前检查时正在工作) - 在Safari中似乎很好。 我已经明确使用过这段代码,但也许我这次忽略了一些东西?Chrome中的CSS3转换

目的只是为了有悬停平稳过渡:

Demo

HTML

<div></div>  

CSS

  div{ 
    height:100px; 
    width:100px; 
    background:red; 

-webkit-transition-duration: 0.3s;  
-webkit-transition-timing-function: ease-in-out; 
-moz-transition-duration: 0.3s;  
-moz-transition-timing-function: ease-in-out; 
transition-duration: 0.3s;  
transition-timing-function: ease-in-out; 
} 

div:hover{ 
    right:-10px; 
    position:relative; 
    height:100px; 
    width:100px; 
    background:red; 

-webkit-transition-duration: 0.3s;  
-webkit-transition-timing-function: ease-in-out; 
-moz-transition-duration: 0.3s;  
-moz-transition-timing-function: ease-in-out; 
transition-duration: 0.3s;  
transition-timing-function: ease-in-out; 
} 

感谢您的任何意见

回答

3

right无法在static定位的元素上工作,您需要使用负载上的position: relative;以及您需要定义right并将其设置为0或任何你喜欢的。

Demo

div{ 
    /* All the properties you have declared will go here plus === */ 
    right:0; /* Add this */ 
    position:relative; /* Add this */ 
} 

使用负载position: relative;会帮你中转您的鼠标出去元素,以及对鼠标悬停,所以如果你是在:hover设置position: relative;那么你的元素将无法过境在鼠标外面。

此外,我注意到你没有使用transition的任何标准属性,所以请确保你使用它们。

+2

在主div上(已隐藏)声明了'position:relative'后,它现在可以从悬停状态中移除。只是一个smidge较少的CSS重量。 :) –

+0

@Paulie_D是的,谢谢你:) –

+0

@ Mr.Alien&Paulie_D完美!谢谢...我猜Google已经收紧了他们的验证 - 时间来检查我的旧网站:) – MikeDre