悬停子元素的Css转换

我试图暂停显示子元素时，它的父母被悬停。悬停子元素的Css转换

HTML：

<span> 
    <div>This Is The Child</div> 
    Some Text in the span 
</span>

的CSS：

span { 
    position: relative; 
} 
span div { 
    display: none; 
    width: 0px; 
    opacity: 0; 

    transition: width 5s; 
    -webkit-transition: width 5s; 

    transition: opacity 5s; 
    -webkit-transition: opacity 5s; 
} 
span:hover div { 
    display: inline-block; 
    width: 150px; 
    opacity: 1; 
}

截至目前，当跨度徘徊，该div有没有延迟上映之前。我该如何解决这个问题，以便暂停一下？

小提琴这里：http://jsfiddle.net/SReject/vmvdK/

的几个注意事项：
我最初试图转型的显示，但爱德华指出，这是不可能的，并试图感上面这些，也”不是个牛逼工作

解决

这样看来，在任何“显示”属性“过渡到”造型将停止任何过渡动画的发生。为了解决这个问题。我将要显示的孩子的宽度设置为0px，并使其完全透明。然后在 “过渡到” 造型，我设置正确的宽度，使DIV固体：

HTML：

<span> 
    <div>This Is The Child</div> 
    Some Text in the span 
</span>

的CSS：

span { 
    position: relative; 
} 
span div { 
    position: absolute; 

    width: 0px; 
    opacity: 0; 
    transition: opacity 5s; 
    -webkit-transition: opacity 5s; 
} 
span:hover div { 
    width: 150px; 
    opacity: 1; 
}

小提琴这里：http://jsfiddle.net/SReject/vmvdK/

来源

2012-07-14 SReject

为什么不反过来''

This Is The ChildSome Text in the DIV

？ ......它在语义上更为正确。 – JFK 2012-07-14 21:29:55

对于GM脚本，跨度由GM脚本修改的站点创建。我想为显示的范围创建一个悬停菜单 – SReject 2012-07-14 21:31:28

根据this article关于CSS转换（由MDN page on CSS transitions引用），display属性不是可以转换的属性提一下：

有几个属性或值你要转型，但是这两者都是unspecced和不支持在写作的时候：

background-image，包括梯度

...

没有和别的之间display

因此将transition: display 5s;属性应用于您的div不起作用。

编辑：基于您的更新代码

，可以实现不透明度你想要的效果，只要你不指定display财产宽度。只需删除从span div部分线路

display: none;

，当你将鼠标悬停在它的弹出菜单中会使用您指定的转换。

由于从display:none;到display:inline-block过渡不能动画，此属性可能只在过渡期结束改变了 - 所以不透明度动画，而div仍然是不可见的。

来源

2012-07-14 22:00:05 Edward

jQuery/JS是唯一的解决方案吗？ – 2012-07-14 22:02:02

好吧，我已经更新了小提琴混合使用不透明度和宽度过渡，它仍然不起作用 – SReject 2012-07-14 22:08:35

您可能想要更新您的问题，以包括更新的小提琴中的代码。 – Edward 2012-07-14 22:15:45

-2

您是否尝试过使用-webkit-transition-delay: ;？如果没有，这可能是你正在寻找的东西？

难道在代码中的一些变化：

span div { 
position: absolute; 
left: 5px; 
top: 5px; 
border: 1px solid #000; 
background-color: #888; 
width: 0px; 
opacity: 0; 
cursor: pointer;

}

span:hover div { 
display: inline-block; 
-webkit-transition-delay: 2s; 
width: 150px;    
opacity: 1;

}

这里还有一个demo

来源

2012-07-14 22:33:06

悬停子元素的Css转换

回答

相关问题