懸停子元素的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轉換

回答

相關問題