2014-11-24 51 views
0

徘徊只使用CSS當用戶將鼠標懸停在某個項目,擴大項目是否有可能,並保持這一狀態,直到用戶將鼠標懸停在另一個項目?CSS繼續懸停項目開放,直到另一個項目是關於

我試圖轉移,這將擴大和保持開放或擴大和密切,而不能擴大,再等操作,然後重新關閉該項目。

<html> 
    <ul id="menu"> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
    </ul> 
</html> 

#menu { 
    font-size: 0px; 
    line-height: 10px; 
    background: #eee; 
} 

#menu li{ 
    font-size: 0px; 
    line-height: 10px; 
    transition:0s 180s; 
} 

#menu li:hover { 
    font-size: 10px; 
    line-height: 12px; 
    transition:0s; 
} 

#menu ul:hover { 
    font-size: 0px; 
    line-height: 12px; 
    transition:0s; 
} 
+0

這恐怕是不可能的只是CSS爲什麼不使用jQuery? – Maantje 2014-11-24 17:14:45

+0

其作品事情,我不能修改HTML頁面。 – user2949976 2014-11-24 17:21:03

回答

0

:hover僞類適用於指針位於元素上的持續時間。

如果用戶離開元素,他們不會再懸停它。所以,簡短的回答是沒有

您可以使用動畫來延遲效果。即使在光標離開後,實際上仍然保持元素不可見,您可以在其上放置一個動畫,在關閉之前添加一個延遲。

如果您將動畫應用於懸停狀態和正常狀態,這可能會有所幫助。但是,如果您的懸停效果正在從display:none更改爲display:block,您將無法獲得任何幫助,因爲display不具備動畫功能。你需要使用類似visibilityheight

相關問題