Css对于子元素的悬停 [英] Css Transition on hover for child element

问题描述

我试图在父元素悬停在子元素上时暂停其显示。

Html：

 < span> 
< div>这是孩子< / div> 
 span中的一些文本
< / span> 
  

Css：

 code> 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; 
} 
  

现在，当span悬停时，div没有延迟显示之前。我将如何修复它，以便暂停？

在这里转义： http://jsfiddle.net/SReject/vmvdK/

几个笔记：

我原本尝试转换显示器，但是正如爱德华所指出的那样，这是不可能的，并且有意义的尝试了上面这也是不起作用的。

SOLVED / p>

看起来，在转换到样式中的任何display属性都会阻止任何转换动画的发生。解决这个问题。我设置要显示的孩子的宽度为0px，并且它是完全透明的。然后在转换到样式中，我设置了正确的宽度，并使div固定：

Html：

 < span> 
< div>这是孩子< / div> 
 span中的一些文本
< / span> 
  

Css：

 code> 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/

解决方案

根据关于CSS转换的本文，由 CSS转换上的MDN页面， display 属性不能转换：

有多个属性或值要转换，但在写作时未指定和不支持：

• 背景图片，包括渐变


• ...


• 显示之间没有任何其他

因此，对 div 应用 transition：display 5s; 属性无效。

编辑：

根据更新后的代码，您可以使用不透明度和宽度只要不指定 display 属性即可。只需删除该行

  display：none;  span div 部分中的
  

由于从 display：none; 的转换，您将会使用您指定的转换。 c>到 display：inline-block 不能进行动画处理，此属性只能在转换结束时更改 - 因此不透明度会动画，而 div 仍然不可见。

Im trying to pause the display of a child element when it's parent is hovered over.

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;
}​

As of right now, when the span is hovered, the div has no delay before it is shown. How would I go about fixing it so there is a pause?

Fiddle here: http://jsfiddle.net/SReject/vmvdK/

A few notes:
I originally tried to transition the display, but as Edward pointed out, that isn't possible, and have sense tried the above which, also, isn't working

SOLVED

It would appear that any "display" property in the "transition to" styling will stop any transition animations from happening. To work around this. I set the width of the child to be displayed to 0px and have it be completely transparent. Then in the "transition to" styling, I set the correct width, and make the div solid:

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;
}​

Fiddle here: http://jsfiddle.net/SReject/vmvdK/

解决方案

According to this article on CSS transitions, which is referenced by the MDN page on CSS transitions, the display property is not one that can be transitioned:

There are several properties or values you’ll want to transition, but which are both unspecced and unsupported at the time of writing:

• background-image, including gradients
• ...
• display between none and anything else

So applying the transition: display 5s; property to your div has no effect.

EDIT:

Based on your updated code, you can achieve the effect you want with opacity and width as long as you don't specify the display property. Simply remove the line

display: none;

from the span div section, and the pop-up menu will use the transitions you specified when you hover over it.

Since the transition from display:none; to display:inline-block can't be animated, this property is probably changed only at the end of the transition - so the opacity animates while the div is still invisible.

这篇关于Css对于子元素的悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！