当鼠标悬停在父元素上时,我想暂停子元素的显示。
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;
}
目前,当光标悬停在span上时,div没有延迟就会显示。如何解决这个问题,以便有一段时间的等待?
示例代码见这里:http://jsfiddle.net/SReject/vmvdK/
几点说明:
我最初尝试过渡显示,但正如Edward指出的那样,这是不可能的;之后我尝试了上面的方法,但也没能解决问题。
已解决
似乎任何“转换到”样式中的“显示”属性都会停止任何过渡动画的发生。为了解决这个问题,我将要显示的子元素的宽度设置为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;
}
<div><span>This Is The Child</span>Some Text in the DIV</div>
?这样更符合语义学的正确性。 - JFK